Fixed position of a div below header while page scrolling

Question

I want to have a div below the header to occupy top fixed position while scrolling. If the page is scrolled up then header also need to display.

CSS

.header {
height:100px;
background:#ffe1d8;
width:100%;
}
.converter {
height:100px;
background:#9fff42;
width:100%;

}
.content {
width:100%;
background:#faff70;
min-height:800px;
}
.fixed-pos {
position:fixed;
top:0;
z-index:1000;
}

HTML

  <div class="header">&nbsp;</div>
  <div class="converter">&nbsp;</div>
  <div class="content">&nbsp;</div>

jQuery

 $(document).ready(function() {
 $( window ).scroll(function() {
     $( ".converter" ).addClass("fixed-pos");
     if ($( ".converter" ).scrollTop(100 )) {
         $( this ).removeClass("fixed-pos");
     }
 });
 });

JsFiddle Here.

In the above fiddle the green color portion (.converter) occupies fixed position of top while scrolling down. If the screen is scrolled up it occupies the same position of top hiding the header (pink) above it. I want the header above .converter div to be displayed when screen is scrolled up top most.

Any help ?

Answer 1

It should be

$(window).scroll(function() { //OnScroll, invoke
    if($(this).scrollTop() > 100) { 
       //If the current scroll position is more than 100, add class
        $( ".converter" ).addClass("fixed-pos");
    } else {
        //Else remove it
        $( ".converter" ).removeClass("fixed-pos");
    }
});

Demo

What was the issue with your solution? First, you were adding the class on the scroll straight away and than you were removing with the if condition and instead of using $(".converter") should be using $(this) referencing window and compare

---

Thanks to @A. Wolff for refactoring the code to a great extent using .toggleClass()

$(window).scroll(function() {
    $(".converter").toggleClass("fixed-pos", $(this).scrollTop() > 100);
});

Demo 2

Answer 2

This could work for you:

http://jsfiddle.net/CjPAa/2/

$(document).ready(function() {
     $( window ).scroll(function() {

         var defaultPosition = $('.header').offset().top + $('.header').outerHeight();

         if($(window).scrollTop() > defaultPosition){
             $( ".converter" ).addClass("fixed-pos");
         } else {
             $( ".converter" ).removeClass("fixed-pos");
         }

     });
});

Answer 3

you can do that with just css...you dont need jquery at all

.header {
height:100px;
background:#ffe1d8;
width:100%;
position:fixed;
}
.converter {
height:100px;
margin-top:100px;
background:#9fff42;
width:100%;
position:fixed;
}
.content {
width:100%;
background:#faff70;
min-height:800px;
}

Answer 4

am not completely sure what your result should be. But maybe it is this:

(function () {
    var scrollMinimum = 0; // minimum scroll offset to fix the bar
    var $scrollTopBar = $('.converter');
    var $win = $(window);
    var visible = false; // whether the bar is currently shown

    $win.on('scroll', function(){
        if (visible == false && $win.scrollTop() > scrollMinimum){
            visible = true;
            $scrollTopBar.addClass('fixed-pos');
        } else if (visible == true && $win.scrollTop() <= scrollMinimum) {
            visible = false;
            $scrollTopBar.removeClass('fixed-pos');
        }
    });
})();

Fiddle