Question

我有一个响应式单页网站，其中包含精选滑块区域和4个内容部分。我创建了一个浮动菜单，允许用户导航到每个部分。在页面加载时，我希望菜单绝对位于左侧特色滑块区域的中间位置。（该菜单仅对桌面可见）

一旦菜单从页面顶部134px向下滚动，我将菜单更改为固定，以便它与用户查看每个内容部分（位于内容顶部）位于同一位置。

我用这个例子创建了一个jsfiddle。 http://jsfiddle.net/VZL3K/5/

目前，当我执行以下操作时会中断：

1.单击菜单中的一个部分，使其向下滚动，调整浏览器大小，然后向上滚动。菜单不会停留在功能区域的中间位置。

如果我向下滚动，请刷新页面，然后滚动到最顶层。

目前，我正在努力解决这个需要如何组装的逻辑。

1.找到特色区域的中间点，如果用户位于页面顶部，则将菜单位置设置为坐在那里。 2.向下滚动，检查菜单从顶部开始是134px并设置为固定。 3.向上滚动，如果它在特色内容区域内，当它到达中间点时停止，否则保持在134px。

// Menu Position
$(function() {
function fixedMenu() {
    var featureMiddleSpot = (($(".feature-slides").height()/2) - ($("#main-menu").height()/2) + ($("header").height()));

        if ($(document).scrollTop() < 134 ) {          
            $("#main-menu").css({
                "position" : "absolute",
                "top" : featureMiddleSpot
            });
        }       

    $(window).scroll(function() {
        if ($(document).scrollTop() >= featureMiddleSpot - 134) {
            $("#main-menu").css({
                "position" : "fixed",
                "top" : "134px"
            });
        } else {
            $("#main-menu").css({
                "position" : "absolute",
                "top" : featureMiddleSpot
            });
        }
    });
}   

fixedMenu();    
$(window).resize(function(){
    fixedMenu();
});
});

我希望这是有道理的！

非常感谢！

Answer 1

好的，你只需要将一个变量从distance1更改为featureMiddleSpot

if ($(document).scrollTop() >= featureMiddleSpot - 134) {
    $('#main-menu').css({
        'position' : 'fixed',
        'top' : '134px'
    });
}

Answer 2

根据CoolArt的回复，更改变量确实有效，但不适用于Safari。

将函数包装在window.load函数中使其工作，因为某些原因它无法获得.feature-slides元素的高度。

使用jquery定位固定/绝对菜单位于部分中间

2 个答案: