Question

我有这个div（#callback），它在提交时通过ajax异步加载，用于更新或删除项目。它是您在页面顶部看到的绿色消息框 http://i1379.photobucket.com/albums/ah126/conchairtoe/1_zpsefd13e23.png 并且当它“滚动”时继续： http://i1379.photobucket.com/albums/ah126/conchairtoe/2_zps6b0c658b.png

我目前拥有它，因此它保持在屏幕的可见范围内，具有“固定滚动”效果，但是，我不希望它位于文档的最顶部，除非滚动偏移达到它，当我滚动时，我希望它保持固定。

我希望它位于导航栏下方，而不是叠加在导航栏上，当滚动偏移尚未达到它时。

继承人JS：

// Notification-Message Position
            $(window).scroll(function(e){ 
                var el = $('#callback'); 
                if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
                    $('#callback').css({'position': 'fixed', 'top': '0px'}); 
                }
                if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
                    $('#callback').css({'position': 'static', 'top': '0px'}); 
                } 
            }); //END Notification-Message Position

这是CSS：

    /*FIXED ON SCROLL*/
#callback{

    position:fixed;
    top:0;
    width:100%;
    z-index:100;

}

对不起这个愚蠢的问题，但我对此非常陌生。

Answer 1

使用此，

$(window).scroll(function(e){ 
                var el = $('#callback'); 
                if ($(this).scrollTop() > 200 && $el.css('position') != 'fixed'){ 
                    $('#callback').css({'position': 'absolute', 'top': '0px'}); 
                }
                if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
                    $('#callback').css({'position': 'static', 'top': '0px'}); 
                } 
            }); //EN

和css一样，

   /*FIXED ON SCROLL*/
#callback{

    position:absolute;
    top:0;
    width:100%;
    z-index:100;

}

Answer 2

尝试将您的JS代码更改为以下内容：

<强> JS：

$(window).scroll(function(e){ 
    var el = $('#callback'); 
    if ($(this).scrollTop() > 200){ 
        $('#callback').css({'top': '75px'}); /* Assuming 75 is the height of you navbar. */
    }
    if ($(this).scrollTop() < 200){
        $('#callback').css({'top': '0px'}); 
    }
});

Answer 3

试试这个： 只有css：

 #callback {
  height: 30px;
  position: fixed;
  right: 0;
  top: 0;
  width: calc(100% - 250px);
  z-index: 100;
   background:red;
}

<div style="height:560px" >
  <div style="float:left;margin:10px 10px 10px 0">
    <input type="submit" name="send_new" value="Send" class="send_button" />
  </div>
  <div id="callback">
    message
  </div>
  <div id="save_status" style="float:left;padding: 15px 0px;">sdd</div>
</div>

修复div的滚动 - 如何使div显示在导航栏下方而不是文档顶部

3 个答案: