Develop Reference

Do not execute jQuery script if CSS is of particular value

On my website, I have a sidebar DIV on the left and a text DIV on the right. I wanted to make the sidebar follow the reader as he or she scrolls down so I DuckDuckGo'ed a bit and found this then modified it slightly to my needs:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
$window.scroll(function(){
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
})
});
});//]]>
</script>
And it works just like I want it to. However, my website uses Skeleton framework to handle responsive design. I've designed it so that when it goes down to mobile devices (horizontal then vertical), sidebar moves from being to the left of the text to being above it so that text DIV can take 100% width. As you can probably imagine, this script causes the sidebar to cover parts of text as you scroll down.
I am completely new to jQuery and I am doing my best through trial-and-error but I've given up. What I need help with is to make this script not execute if a certain DIV has a certain CSS value (i.e. #header-logo is display: none).
Ideally, the script should check for this when user resizes the browser, not on website load, in case user resizes the browser window from normal size to mobile size.
I imagine it should be enough to wrap it in some IF-ELSE statement but I am starting to pull the hair out of my head by now. And since I don't have too much hair anyway, I need help!
Thanks a lot in advance!

This function will execute on window resize and will check if #header-logo is visible.
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
});
I think you need to check this on load to, because you don't know if the user will start with mobile view or not. You could do something like this:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
// Your code
}
}).resize();
This will get executed on load and on resize.
EDIT: You will probably need to turn off the scroll function if #header-logo is not visible. So, instead of create the function inside the scroll event, you need to create it outside:
$(window).resize(function() {
if ($('#header-logo').is(':visible')) {
var $sidebar = $('#sidebar'),
sidebarOffset = $sidebar.offset(),
$window = $(window),
gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
footerHeight = $('#footer').outerHeight();
function myScroll() {
distance = ($window.scrollTop()) - (sidebarOffset.top - gap);
if ( distance > 0 ) {
$sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
} else {
$sidebar.css({'top': '0', 'position': 'relative'});
}
}
$window.on('scroll', myScroll);
} else {
$(window).off('scroll', myScroll);
}
});
Didn't test it, but you get the idea.

$("#headerLogo").css("display") will get you the value.
http://api.jquery.com/css/
I also see you only want this to happen on resize, so wrap it in jquery's resize() function:
https://api.jquery.com/resize/

Change CSS properties when the element passes a specific position

my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks

You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.

Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});

Fix navigation position when scrolling

I want to fix the position of navigation at the top when the navigation position and scroll position are equal.
Please let me know how can I get the position of navigation and page scroll position? I want something like this: http://new.livestream.com/live-video-tools
I've tried:
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#main-heading').offset().top;
// our function that decides weather the navigation bar should have "fixed" cs s position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if(scroll_top > sticky_navigation_offset_top) {
$('#fixed_nav').css({ 'position': 'fixed', 'top':6, 'left':0, 'width':'100%', 'z-index':999, 'height':80, 'background':'#fff' });
} else {
$('#fixed_nav').css({ 'position': '','overflow': 'visible', 'display':'block','height':80});
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});

This is old, but deserves an answer for Googlers' benefit.
See Fiddle here.
$(function () {
var offset = $('#nav').offset().top;
var nav = function () {
var scroll = $(window).scrollTop();
if (scroll < offset) {
$('#nav').css({ 'position': 'relative' });
}
else {
$('#nav').css({ 'position': 'fixed', 'top': 0 });
}
};
nav();
$(window).scroll(function () {
nav(); //this ensures we check again every time the user scrolls
});
});
OP - you probably figured it out by now, but I'm not sure why you were checking the offset of #main-heading and then setting the position of a different #fixed-nav, that's probably where you're issue was.

Jquery DIV collision

I found the following script to make a menu have a smooth animation following the screen when scrolling.
However, it's pushing down the footer, resulting the page height expanding with no further content. How do I make it stop scrolling when it collides with the footer?
Here's the code:
$(function() {
var $sidebar = $("#indhold_right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, "fast");
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

Let us take a step back and see why it is happening the way it is happening.
When you scroll $window.scrollTop() AND offset.top both change. However, the former will always be greater than the latter. So, every time you scroll, your if condition evaluates to true and you are calling the animate function on it. You don't have a stop.
How do we put a stop? By putting a stop check beyond which you don't animate. When the page loads get the $("#footer").offset().top which is the footer height when you start. So, the check is against $window.scrollTop() which should be lesser than the footer top.
Will that check work? Yes, but it will not be pleasant(unless you want it that way) because your side bar has height and the stop works only after your sidebar top has reached the footer height(stop). So, just add the sidebar height to your stop. This will not be 100% accurate, there will be padding, margins, and other stuff that are not accounted for in this stop, but it looks pretty good and I think, you can continue from there.
Before I give you the code answer, please take a look at http://sscce.org/ (as mentioned by #Zeta). Always follow this. I had some time and a good mood. I wouldn't have even looked at it otherwise.
Below is the code. Working example - http://jsfiddle.net/H3Dqr/
$(function() {
var $sidebar = $("#indhold_right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0,
stop = $("#footer").offset().top;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
if ($window.scrollTop() + $sidebar.height() < stop) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, "fast");
}
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});​

lock a div on header when window scrolled past element

I want a circle div to lock in the header when the user scrolls past in.
I'm using the following code but it doesn't work
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function() {
if (window$.scrollTop() > oCircleBottom) {
}
}.bind(this));
I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?

Enclose your code in $(document).ready function
$(document).ready(function () {
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function () {
if (window$.scrollTop() > oCircleBottom) {
$('.circle').css({
position: 'fixed',
top: '0',
left: '0'
});
}
else{
$('.circle').css({
position: 'static'});
}
}.bind(this));
});

You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example
However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example
Hence, its better to subtract the window height. jsFiddle
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
//Do you stuff
}
});