Question

我找到了this solution并需要对其进行修改，以便当它击中页脚时它会解开。我知道没有scroll_bottom，所以我想尝试为页脚创建一个变量，如下所示。我会继续插手，然而，希望也许有人可以提供帮助。

$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
    $mainMenuBar = $('#mainMenuBar'),
    $mainMenuBarAnchor = $('#mainMenuBarAnchor');

// Run this on scroll events.
$window.scroll(function() {
    var window_top = $window.scrollTop();
    var window_bottom = $window.height() - this.scrollTop() - this.height(); 
    var div_top = $mainMenuBarAnchor.offset().top;
    if (window_top > div_top) {
        // Make the div sticky.
        $mainMenuBar.addClass('stick');
        $mainMenuBarAnchor.height($mainMenuBar.height());
    }
    else if (window_bottom > div_top) {
     $mainMenuBar.removeClass('stick');
        $mainMenuBarAnchor.height(0);
    }
    else {
        // Unstick the div.
        $mainMenuBar.removeClass('stick');
        $mainMenuBarAnchor.height(0);
    }
});

}）;

我还发现this solution，但无法使用jquery 1.7。

Answer 1

这似乎可以完成这项工作：

<强> HTML

你说你想要一个不使用#mainMenuBarAnchor的解决方案，所以删除：

<div id="mainMenuBarAnchor"></div>

来自您的HTML代码。

<强> JS

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $menuBarOffset = $mainMenuBar.offset().top,
        window_top = 0,
        footer_offset = $("#footer").offset().top,
        content = $("#content"),
        panel_height = $mainMenuBar.outerHeight()+'px';


    // Run this on scroll events.
    $window.scroll(function() {
        window_top = $window.scrollTop();

        if (window_top >= $menuBarOffset) {
            if (window_top >= footer_offset) {
                // Unstick the div.
                $mainMenuBar.removeClass('stick');
                content.css('margin-top', 0);
            } else {
                // Make the div sticky.
                $mainMenuBar.addClass('stick');
                content.css('margin-top', panel_height);
            }
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            content.css('margin-top', 0);
        }
    });
});

代码现在比以前稍长一些，但这主要是因为我在开头添加了一些变量，这样你就不必在每个滚动上计算一些东西（比如页脚偏移，菜单栏偏移.. ）。

<强> jsFiddle demo

如果它滚动到屏幕顶部并且一旦它击中页脚，我怎么能在屏幕顶部做一个div？

1 个答案: