1

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

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

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

7 回答 7

1

您可以将其设置为 top -100，因为它是 -50 并且在 50 之后发生滚动：

$(".articlebutton").css("top", ($(window).scrollTop()-100)+"px");
于 2013-08-28T11:48:40.363 回答
1

试试这个：

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

小提琴

于 2013-08-28T11:50:54.540 回答
1

演示

试试这个

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

    });
});

希望这有帮助，谢谢

于 2013-08-28T11:55:48.343 回答
0

你可以在那条线上做这样的事情：

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

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

于 2013-08-28T11:46:37.303 回答
0

为什么不简单地position:fixed;为 div 设置一个？这样一来，它总是在顶部。请参阅下面的 css

 .articlebutton div
 {
      position:fixed;
      top:0;
 }
于 2013-08-28T11:46:40.567 回答
0

将 div 的属性设为

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

它会让你的 div 始终保持在顶部.. 无论你滚动页面多少

于 2013-08-28T11:47:38.657 回答
0

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

        }   
    }
});
}
});
于 2019-09-24T04:09:56.500 回答