We Keep Coding

targeting a specific nav div in code

I have the following code which applies classes to the <nav> element. The code works so no issues there.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav').addClass('stick');
$('nav').css('top','0');
}
if ($(window).scrollTop() < 300) {
$('nav').removeClass('stick');
$('nav').css('top', '0');
}
});
});
however I use two elements in my website so I only want the code to apply to this specific nav
html
<nav role="main-navigation"> ... </nav>
As well, I would also like the code to ONLY apply to this nav element on screens >768px

1/ "Want the code to apply to this specific nav "
If you don't want to add more attribute (id, class) you can use Attribute Equals Selector
$("nav[role='main-navigation']").
2/ "ONLY apply to this nav element on screens >768px"
Reference to this answer
if (window.matchMedia('(min-width: 768px)').matches) {
//...
} else {
//...
}

$('nav')[0] --> it identifies specific nav tag.. without using id we can specify like this.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('nav')[0].addClass('stick');
$('nav')[0].css('top','0');
}
if ($(window).scrollTop() < 300) {
$('nav')[0].removeClass('stick');
$('nav')[0].css('top', '0');
}
});
});

Add class onscroll combined with onepage-scroll.js plug-in

I'm currently using the onepage-scroll.js (https://github.com/peachananr/onepage-scroll) plug-in on my website to scroll through the homepage. When scrolling past the first "slide" I would also like to add a class (sticky) to my header to change some CSS. I've tried the code below, but I can't seem to get it working and I'm kinda in the dark here on how to make this solution work.
var header = $("header");
$("#sliders").scroll(function() {
var scroll = $('#sliders').scrollTop();
console.log(scroll);
if (scroll >= 50) {
header.addClass("sticky");
} else {
header.removeClass("sticky");
}
});

Try to make it on document ready.
Down only my example worked code on onepage-scroll.js
$(document).ready(function(){
$(".main").onepage_scroll({
sectionContainer: ".sectionscroll",
responsiveFallback: 600,
loop: true,
afterMove:function (index){
if ((index == 2)||(index == 3)){
$('#main').addClass('darktheme');
}else{
$('#main').removeClass('darktheme');
}
}
});
//$(".main").moveTo(2);
$(".btn-list-bottom").click(function(){$(".main").moveTo(4)});
});
All you section must have the same class.

How to remove element one by one with same class after scrolling down?

I have a column of 15 squares with a class of "box".
I expect to remove them from body only one by one after scroll down.
I tried this but nothing happens:
$(window).scroll(function() {
if ($('.box:first').offset().top + $('.box:first').height() < $(window).scrollTop()) {
$(this).remove();
};
})
Any suggestions ?
http://jsfiddle.net/e1m1bmd4/1/

Replace $(this) with $'.box:first').remove(). Because $(this) refers to the window scroll object not the box element.
Working JSFiddle

$(this) refers to the window object as you have it. Be more specific:
if ( $('.box:first').offset().top
+ $('.box:first').height() < $(window).scrollTop() ) {
$('.box:first').remove();
}
Demo

You can use first().
$(window).scroll(function() {
if ($('.box').first().offset().top + $('.box').first().height() < $(window).scrollTop()) {
$('.box').first().remove();
};
})
And refer to current 1st box class Not window which you had in code.
Fiddle

jquery if css height > Xpx do this

Is there any way to trigger a function with jquery once a CSS element reaches a certain height?
I imagine an example would look something like:
function(){
if( $("#bar").css('height') > '20px') {
$("#mydiv").show();
});
HTML:
<b style="display:none" id="mydiv">Hello!</b>
Can't seem to find a way to successfully make it work.
Example: http://jsfiddle.net/5ptkqajv/1/

You can add your check in the click-function, so it gets executed when the height is changing:
$('h1').on("click", function() {
advanceRound();
render();
if($("#fill").height() > 60){
$("#mydiv").show();
}
});
Updated Fiddle
Alternativly you cann add the check in your function renderBar().

Attach and detach affixed headers with Twitter Bootstrap

I'm trying to use the affix function to attach a header to the top of the screen, but have it attached only for a portion of the page. It should detach (and scroll up along with the content) when the user scrolls past a certain point.
I'm using the script from this jsfiddle.
What I'm trying right now is this:
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: $('#nav').position()
});
$('#nav').detached({
offset: $('#bottom').position()
});
With the .detached class like so:
.detached { position: static; }
Can't get this to work. Any suggestions?

Twitter Bootstrap affix module doesn't have that option. But, I've used many times hcSticky, it is awesome. Take a look, it's simply to use and works very well.

You can write the logic in a function, and pass it to affix as offset.top.
Try
var navHeight = $("#nav").height();
var detachTop = $("#detach").offset().top;
var navTop = $("#nav-wrapper").offset().top;
$('#nav-wrapper').height(navHeight);
$('#nav').affix({
offset : {
top : function() {
if ((navHeight + $(window).scrollTop()) > detachTop) {
return Number.MAX_VALUE;
}
return navTop;
}
}
});
Fiddle is here.

Another option which might work for you: http://jsfiddle.net/panchroma/5n9vw/
HTML
<div class="header" data-spy="affix">
affixed header, released after scrolling 100px
</div>
Javascript
$(document).ready(function(){
$(window).scroll(function(){
var y = $(window).scrollTop();
if( y > 100 ){
$(".header.affix").css({'position':'static'});
} else {
$(".header.affix").css({'position':'fixed'});
}
});
})
Good luck!