Question

我是jquery的新手，当页面滚动超过50时，我希望div挂在屏幕顶部，我该如何实现？

我希望div始终是绝对的而不是固定的。

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

Answer 1

你可以将它设置为位于顶部-100，因为它是-50并且滚动发生在50：

之后

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

Answer 2

试试这个：

$(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

Answer 3

<强> DEMO

试试这个

    $(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);
        }

    });
});

希望这有帮助，谢谢

Answer 4

您可以在该行上执行以下操作：

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

或事件更好，请使用position: fixed; top: 0;

Answer 5

为什么不简单地为div设置position:fixed;？这样它总是会在顶部。见下面的CSS

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

Answer 6

将div的属性设为

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

它会让你总是保持在最顶层..无论你滚动页面多少

Answer 7

以下代码摘自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;

        }   
    }
});
}
});

如何在向下滚动时实现浮动div

7 个答案: