Question

我希望我的div向下滚动，当我滚动窗口时，它正在发生但是当我改变窗口的分辨率时它的位置会发生变化

这是我的代码

$(document).ready(function() {  
    var stickyNavTop = $('#sticker').offset().top; 
    var stickyNav = function() { 
        var scrollTop = $(window).scrollTop();  
        if (scrollTop > stickyNavTop) {   
            $('#sticker').addClass('effect');  
        } else {  
            $('#sticker').removeClass('effect');   
        }  
    };
});

//在css文件中

.effect
{
    position: fixed;  
    width: 100%;  
    left: 783px;  
    top: 0px;  
}

Answer 1

基本上屏幕分辨率独立的东西是位置固定

如果你有

<div class="asd"></div>

你要修复这个div css：

.asd{position:fixed; top:0;}

在你的情况下，你可能已经忘记了。在你的CSS。 “”定义类

.effect
{
position: fixed;  
    width: 100%;  
    left: 783px;  
    top: 0px;  

 }

Answer 2

您可以尝试使用CSS中的position:fixed;属性来根据浏览器的窗口大小修复该div（但div的大小不会因您而改变）。

对于响应性，您可以尝试top, left, right, bottom的值作为百分比。

我并不完全确定你的意思，但如果你不希望这个位置依赖于窗口的大小，你可以尝试position:absolute;，但取决于父母的div。

Answer 3

你在寻找这种效果吗？

Mashable floating effect example with jQuery

即使窗口的分辨率发生变化，如何使div保持在页面上

3 个答案: