Question

当我的网站开始缩放到特定尺寸（767px）时，我试图找出如何关闭我的div的粘性能力。我尝试在媒体查询中将位置从绝对更改为相对。但当我试图滚过div时，整个屏幕会向上滚动到div而不是让我向下滚动。

当我缩放到767px时如何去除粘滞效果并在我缩放到768及以上时启用它？

$(function() {

    var $sidebar   = $("#postRecipe"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });    
 });

CSS

 #postRecipe {
     position:absolute; 
     float:left;
     width:30%;  
 }

 #content {
     float:right;
     width:50%; 
 }

http://jsfiddle.net/y8KGG/4/

Answer 1

我在jfiddle中搞砸了一些东西。你必须清理它，但我相信你可以用它来引用你正在做的事情。

我只在屏幕达到一定分辨率时运行JavaScript。在我正在使用它的Firefox中，但只是让你的屏幕更小，你不得不刷新页面。

http://jsfiddle.net/y8KGG/10/

JavaScript

$(function () {
    if ($(window).width() >= 500) {
        var $sidebar = $("#postRecipe"),
            $window = $(window),
            offset = $sidebar.offset(),
            topPadding = 15;
        $window.scroll(function () {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });
    }
});

CSS

@media (max-width: 500px) {
    #postRecipe {
        position: relative;
        float:left;
        width:30%;
    }
}
#content {
    float:right;
    width:50%;
}
#postRecipe {
    position: absolute;
    float:left;
    width:30%;
}

修改

通过在每次调整窗口大小时调用该函数来解决问题。

JSFiddle：http://jsfiddle.net/y8KGG/17/

新JS：

$( window ).resize(function() { var $sidebar = $("#postRecipe"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; if ($(window).width() >= 500) { $window.scroll(function () { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); } });

Answer 2

以下测试是激活粘性效果的测试：

if ($window.scrollTop() > offset.top) { }

您可以添加条件以在特定屏幕尺寸上激活它例如，您只能在宽度为767px的屏幕上激活它：

if ($window.scrollTop() > offset.top && $window.width() > 767) { }

Demo

使粘性div功能响应

2 个答案: