CODEWITHSUNDEEP
javascriptjquerycss
Danny Pelletier
Danny Pelletier

Reputation: 29

How to achieve floating div on scrolldown

I am a newbie on jquery, and I want the div to hang on top of the screen when the page scrolldown is more than 50, how can I achieve this?

I want the div to be always absolute and not fixed.

http://jsfiddle.net/8UCcY/

$(document).ready(function () {
    $(window).scroll(function () {
          if ($(window).scrollTop() > 50) {
              $(".articlebutton").css("top", "0px"); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
          } else {
              $(".articlebutton").css("top", "-50px");
          }
     });
});

Upvotes: 1

Views: 1267

Answers (7)

Chandan Kumar Thakur
Chandan Kumar Thakur

Reputation: 292

The following code is taken from https://deltafrog.com/create-floating-div-jquery/ 

jQuery('document').ready(function(){
if(jQuery('.right').length){

jQuery(window).scroll(function(){
    var win_width=jQuery(window).width();
    if(win_width>1200){
        var topoffset=jQuery('.right').offset().top;
        var leftoffset=jQuery('.right').offset().left;

        var botoffset=jQuery('footer').offset().top;

        var block_height=jQuery('.floating-block').height();
        botoffset=botoffset-block_height-250;
        topoffset=topoffset-200;

        var sTop=jQuery(window).scrollTop();

        var top_fix_to_abs=botoffset-topoffset;
        if(sTop < topoffset){
            jQuery('.floating-block').removeClass('curr_fix');
            jQuery('.floating-block').removeClass('right_fix');
            jQuery('.floating-block').css('top',"");
            jQuery('.floating-block').css('left',"");
            console.log('h1');
        }
        if(sTop > topoffset && sTop<botoffset){
            jQuery('.floating-block').addClass('curr_fix');
            jQuery('.floating-block').addClass('right_fix').css('left',leftoffset);
            jQuery('.floating-block').css('top',"");
            console.log('h2');
        }
        if(sTop >=botoffset && sTop>topoffset){
            jQuery('.floating-block').removeClass('curr_fix');
            jQuery('.floating-block').css('left',0);
            jQuery('.floating-block').css('top',top_fix_to_abs);
            console.log('h3');
            //return;

        }   
    }
});
}
});

Upvotes: 0

SarathSprakash
SarathSprakash

Reputation: 4624

DEMO

Try this

    $(document).ready(function () {
    var top = $(".articlebutton").css('top');
    $(window).scroll(function () {

        if ($(window).scrollTop() > 50) {

            $(".articlebutton").animate({
                "top": $(window).scrollTop() + "px"
            }, 400);
        } else {
            $(".articlebutton").animate({
                "top": top
            }, 400);
        }

    });
});

Hope this helps,thank you

Upvotes: 1

Abhishek Jain
Abhishek Jain

Reputation: 2607

Try this:

$(document).ready(function () {
    $(window).scroll(function () {
          if ($(window).scrollTop() <= 50) {
              $(".articlebutton").css("top", $(window).scrollTop() - 50); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
          } else {
              $(".articlebutton").css("top", $(window).scrollTop() - 100);
          }
     });
});

Fiddle

Upvotes: 1

Mihai Iorga
Mihai Iorga

Reputation: 39704

You can set it to position top -100 since it is -50 and scroll occurs after 50:

$(".articlebutton").css("top", ($(window).scrollTop()-100)+"px");

Upvotes: 1

Saurabh Sinha
Saurabh Sinha

Reputation: 1800

make the property of div as 

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

it will make you div always stay on top.. no matter how much you scroll the page

Upvotes: 0

Dean Martin
Dean Martin

Reputation: 1273

Why not simply set a position:fixed; for the div? That way it will always be at the top anyways. See the css below

 .articlebutton div
 {
      position:fixed;
      top:0;
 }

Upvotes: 0

Niels
Niels

Reputation: 49919

You can do something like this on that line:

$(".articlebutton").css("top", $(window).scrollTop());

Or event better, use a position: fixed; top: 0;

Upvotes: 0

Related Questions