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');
}
});
});

Setting margin-top of one element to the height of another element using JQuery

I'm trying to have a header at the top with a non-fixed height but a fixed position, and below that a content area. Now, I simply added a fixed padding-top to the element so the content would show below the header. I'm trying to do this using JavaScript and JQuery. I think the way I did it would be the best way, but it doesn't quite work.
[HTML]
<div class="contentPage" id="page_1" name="templates">
<div class="contentPageHeader">
<a href="#menu">
<div class="pageBack">
<h4>Back</h4>
</div>
</a>
<h3>Templates</h3>
</div>
<div class="contentPageContent">
</div>
</div>
[JS]
var headerHeight = $('.contentPageHeader').css( 'height' );
$('contentPageHeader').css('margin-top', headerHeight);
For a full demo visit this JSfiddle

You should to fix your javascript:
var headerHeight = $('.contentPageHeader').outerHeight();
$('.contentPageContent').css('margin-top', headerHeight);
Also this code should be placed inside the click method.
jsfiddle

You need to define the unit for marginTop for eg. px or %:
$('.contentPageHeader').css('margin-top', headerHeight + 'px');
//^^ missed a selector (the dot)

Try this
$(document).ready(function () {
$("a").click(function () {
if (this.hash) {
var hash = this.hash.substr(1);
var $toElement = $("div[name=" + hash + "]");
if (hash == "menu") {
$('.contentPage').fadeOut(300);
$($toElement).fadeIn(300);
} else {
$('#menu_holder').fadeOut(300);
$($toElement).fadeIn(300);
}
}
var headerHeight = $('.contentPageHeader').css( 'height' ); //your code added here
$('.contentPageHeader').css('margin-top', headerHeight);
});
});
Fiddle:https://jsfiddle.net/mdeujc0u/3/
Updated fiddle: https://jsfiddle.net/mdeujc0u/5/

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().

How can I hide a button when scrolled to the top of a page?

I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?

You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}

Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).

You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....

This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});

JQUERY- refer to specific div with class as other divs inside the html page

In the fiddle you will see at the center of the page a DIV that contains text next to an img.
When I scroll down/up I need to effect with jquery/javascript only the div who's the closest to the navbar-below. all the divs as the same class so I effect them all-not what I need
For example:
what I am trying to achieve : when I scroll down,the closest div to the navbar(yellow bar) will be painted(the div) green,so if I scroll down and the navbar "collapse" with the div with will paint in green, and when he passes him and "disapper" it will go back to original color and the next div will paint in green. is it possible?
Here's the JS FIDDLE
When I referred to div I meant this section :
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
EDIT:
UPDATED JSFIDDLE :
http://jsfiddle.net/nnkekjsy/3/
I added my jquery,as you can see it works only for the first one,and then stuck.. i need to "pass" it along the others div below him when the are getting to the same point. any ideas? :
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if ( scrollVal > 55) {
$('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({'position':'static','top':'auto'});
}
});
});

Have you tried use the first-of-type to select the top div, if i understand what your trying to do.
CSS3 selector :first-of-type with class name?
An other solution would be to check the position of the div and the nav bar and pick the closest one.
$(".left_side").each(function () {
//compare scroll with div
if(window.scrollTop() = $(this).position.top())
{
//do something
}
});
I know the position and the scroll won't be the same value but you can play with the condition to put some range.
Edit :
I think this is what you want. The navHeight and the height variable should be outside the window.scroll function as they never change :
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
var height = parseInt($(".right_side").css("height").split("px")[0]);
$(".left_side").css({'position':'static','top':'auto'});
$(".left_side").filter(function( ) {
return $(this).position().top - 10 < scrollVal && $(this).position().top + height > scrollVal;
}).css({'position':'fixed','top' :navHeight+'px'});
});
Working fiddle :
http://jsfiddle.net/nnkekjsy/6/