javascript - 使粘性 div 功能响应

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