jQuery scroll detection and if else

Question

I am attempting to make it so that if I scroll past a div or the width of that div the sidebar becomes fixed. As you can see here.

Just scroll down and you will see what I mean. I want the sidebar to scroll from its relative position and not jump down the 500px. I would also like a if statement to tell it to return which for some reason it didn't like when I tried. Another major problem is that I am using @media to detect widths and if it below a certain width I want it to stop being fixed.

I hope that was clear enough any help is very much appreciated

possible duplicate of [how can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — apaul, May 28 '14 at 00:37

KennyGHanson · Answer 1 · 2014-05-28T00:31:04.647

You just need to add the additional top position style to define where the elements new top is.

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 500){
            $('.fixed').css({'position': 'fixed', "top": "0px"});
        } else if ($(window).scrollTop() < 500){
            $('.fixed').css({'position': 'relative'});
        }
    });
});

The preferred way to do this, is to add an id to the element you will be working with, create a class in css (eg 'fixed'), add the appropriate styles in that rule, then use .addClass('fixed') and .removeClass('fixed') accordingly. that code would look like this:

jQuery:

$(document).ready(function(){
    var elem = $('#sidebar');
    $(window).scroll(function(){
        if ($(window).scrollTop() > 500){
            elem.addClass('fixed');
        } else if ($(window).scrollTop() < 500){
            elem.removeClass('fixed');
        }
    });
});

CSS:

.fixed {
    position: fixed;
    top: 0px;
}

If you would like to solve your media query issue, simply add the following CSS to the respective media query:

@media only screen and (min-width : 321px) {
    .fixed {
        position: relative;
    }
}

ah sorry we answer almost at the same time. it seemd my answer is simple (and animated). — Dragouf, May 28 '14 at 00:42
Thank you for your reply, and dragouf. I am still having issues however with the @media aspect it still reverts to fixed and completely ignored the css. also the default value of .fixed being 0px; starts the sidebar at the top of the page i presume that wasn't intentional — user248305, May 28 '14 at 01:17
You must remove the 'fixed' class from your html and allow the jQuery to handle that alone. In regards to the media query issue, are your media queries below all other styles, especially the `.fixed` class? Media queries should be the last rules in your CSS. If you are still having trouble you can always add `!important` to the position: relative of the `.fixed` class in your media query section. — KennyGHanson, May 28 '14 at 19:27

score 0 · Answer 2 · answered May 28 '14 at 00:33

Apply this css to your ul.navbar-right :

position: relative;
right: 0;
top: 0;
z-index: 2000;

then add this javascript :

// Follow window scroll
$(window).scroll(function () {
    if ($(window).scrollTop() > 80) {
        $('.navbar-right').animate({ top: $(window).scrollTop() }, 60);
    } else {   
        $('.navbar-right').stop(true, true).css('top', '0px');
    }
});

it must do the trick...

You can change number 60 to change the animation speed.

score -1 · Answer 3 · answered May 28 '14 at 00:06

-1

For anything fixed you can use CSS: Fixed

Example: 
.class {
    position: fixed;
    top: 100px;
    right: 100px;
}

answered May 28 '14 at 00:06

Derple

865
11
28

I know I can make it fixed, the problem is once it's fixed it goes into the wrong position. but thanks for replying anyway – user248305 May 28 '14 at 00:13
Heres a great article on achieving the "unfix" using transitioning css. @user248305 http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ – Derple May 28 '14 at 00:13

jQuery scroll detection and if else

3 Answers3