2

全部。我正在尝试创建一个浮动在动态定位的 div 中的垂直固定导航菜单。我希望 div 水平滚动，使其不与页面上的内容重叠，但垂直固定，使其始终可见。我仍然用 jquery 弄湿了我的脚，虽然我为我有限的知识能够完成的事情感到非常自豪，但我在尝试实现的代码中遇到了障碍。

我创建了 4 个函数。一种定义导航 div 的位置 (getVar)，一种采用 div 的当前位置并操作 CSS 以使其随页面内容水平滚动(scrollWith)，一种在窗口打开时调用第二个函数scrolled(scrollStart)，最后是一个在调整窗口大小时重新定义 div 位置的函数。

加载时正确计算 div 的位置。在调整窗口大小后，它甚至会被正确地重新计算，但前提是窗口没有被滚动。滚动窗口后，似乎更新的位置变量不会传递给计算 CSS 位置的函数。

我尝试过创建这个，其中只有两个功能，一个用于加载，一个用于调整窗口大小后。这两个功能实际上是相同的，但没有按我希望的方式工作。我还尝试创建一个 scrollStop 函数，该函数将在调整窗口大小时取消绑定滚动事件，并在重新计算变量后调用 scrollStart 函数，但似乎变量没有按照我希望的方式刷新。可能有一种更简单的方法来实现我所追求的效果，非常感谢任何输入。

我也为此创建了一个小提琴。http://jsfiddle.net/ED3gD/

这是我的jQuery

$(document).ready(function() {
    getVar();
    scrollStart();
});

$(window).resize((function() {
    var timeout = null;
    return function() {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(getVar, 250);
    };
})());

function getVar() {
    var p = $(".navigation");
    position = p.offset();
}

function scrollWith() {
    $win = $(window);
    $('.navigation').css('left', position.left - $win.scrollLeft());
}

function scrollStart() {
    $(window).scroll(scrollWith);
}

这是我的 HTML

<div class="wrapper">
    <div class="navigation">
        <div class="menu">
            navigation
        </div>
    </div>
    <div class="content">content</div>
    wrapper
</div>

这是我的 CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float: left;
    position:fixed;
    width:100px;
    background-color:yellow;
}


.content {
    position:absolute;
    left:100px;
    top:0px;
    margin:0;
    padding:0;
    width:100px;
    height:1400px;
    background-color:blue;
}
4

1 回答 1

0

我仍然不完全理解为什么我的原始 jquery 不起作用，并且希望有人提供解释或向我指出一些好的资源。同时，我找到了两种解决此问题的方法，我认为这可能对将来的某人有所帮助。

第一次解决

第一个解决方法是让 div 相对定位并依靠 scrollTop 值来操纵 div 的 CSS 顶部位置值，以便它模仿具有固定位置。我不是特别喜欢这种方法，因为导航菜单在滚动时会以非常不稳定的方式移动。

这是我的jQuery

 $(document).ready (function() {
    $(window).scroll(function(){
    $('.navigation').css('top',0+ $(window).scrollTop());
      });
      });

这是我的 HTML

<div class="wrapper">
            <div class="navigation">
             navigation
            </div>
            <div class="content">
             content
            </div>
 wrapper
</div>

这是我的 CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float:left;
    position:relative;
    width:100px;
    background-color:yellow;
}    

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

第二次工作

下一个变通方法与原始 jquery 非常相似。不同之处在于我已将导航 div 宽度设为 100%，并使用它来包含已在内部动态定位的菜单 div。这样，jquery 根本不需要计算导航 div 位置，这使我可以完全回避位置变量的问题。

这是我的jQuery

$(document).ready (function() {
$(window).scroll(function(){
$('.navigation').css('left', 0 - $(window).scrollLeft());
  });
  });

这是我的 HTML

<div class="navigation"> 
          <div class="menu">
           menu
        </div>
            navigation
    </div>

    <div class="wrapper">
        <div class="content">content</div>
    wrapper
</div>

这是我的 CSS

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    position: fixed;
    width:100%;
    min-width:200px; 
    background-color:transparent;
}    

.menu {
    position: relative;
    width:100px;
    margin:0 auto; 
    left: -50px;
    z-index: 10;
    background-color:yellow;
}

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

[注意：在发布此答案时，jsfiddle.net 已关闭]

于 2011-04-22T19:13:45.987 回答