CODEWITHSUNDEEP
jqueryhtmlcss
Paramasivan
Paramasivan

Reputation: 791

Fixed position of a div below header while page scrolling

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 ?

Upvotes: 0

Views: 5010

Answers (4)

M&#246;hre
M&#246;hre

Reputation: 939

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

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

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

Upvotes: 4

indubitablee
indubitablee

Reputation: 8206

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

Upvotes: 0

LGVentura
LGVentura

Reputation: 1547

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

     });
});

Upvotes: 0

Related Questions