我在构建网站时遇到了一些问题。我正在使用 jQuery 插件“滚动到”，因为该网站是一个包含不同部分的完整页面。现在我试图在用户向下滚动时将导航栏固定在页面顶部，但此刻它位于滚动条的顶部。
我找到了一个关于如何停止它位于滚动条顶部的答案，它说我应该删除“overflow:auto;”来自“包装器”div，但不知何故，这杀死了我的 ScrollTo 插件，并且链接不再有效。
我希望页面右侧有一个滚动条，用户可以使用它向下滚动，但我希望白色的大导航条固定在顶部。
我的网站可以从这个链接下载> http://dl.dropbox.com/u/14917277/YW4YW%20Website.zip - 这只是一个小网站，因此下载不会花两秒钟。
我们非常感谢任何帮助，感谢大量的男孩和女孩!
最佳答案
为什么要将您的内容放在溢出 div 的包装器中？发生这种情况是因为包装器的 z-index 低于顶部栏。取下 wrapper 。让内容正常溢出就好了!
用这个替换你的索引文件:
<html lang="en">
<head>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$(document).scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_height = height * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_height);
$('body .item').css({width: width, height: height});
$('body').css({width: width, height: mask_height});
$(document).scrollTo($('a.selected').attr('href'), 0);
}
</script>
<title>Young Women 4 Young Women - Breast Cancer Support Group - Southmead Hospital, Bristol</title>
</head>
<body>
<div id="top-wrap">
<div id="top-bar"></div> <!-- CLOSE TOP-BAR -->
<div id="navigation-wrapper">
<div id="navigation-bar">
<div id="navigation-main">
<a href="#item1" class="panel">HOME</a> <a href="#item2" class="panel">ABOUT THE GROUP</a> <a href="#item3" class="panel">SCHEDULE</a>
</div> <!-- CLOSE NAVIGATION-MAIN -->
<div id="navigation-main-2">
<a href="#item4" class="panel">IN THE NEWS</a> <a href="#item5" class="panel">LINKS</a> <a href="#item6" class="panel">GET IN TOUCH</a>
</div> <!-- CLOSE NAVIGATION-MAIN-2 -->
</div> <!-- CLOSE NAVIGATION-BAR -->
</div> <!-- CLOSE NAVIGATION-WRAPPER -->
<div id="emblem"><a href="index.html"><img src="images/emblem.png" alt="Young Women 4 Young Women" /></a></div> <!-- CLOSE EMBLEM -->
</div> <!-- CLOSE TOP-WRAP -->
<div id="item1" class="home-area">
<a name="item1"></a>
<div class="content">
<div class="home-header-wrap">
<div class="home-pad"></div>
<div class="home-header-image"><div class="home-cleardiv"></div><h1>YOUNGWOMEN4YOUNGWOMEN.COM</h1></div>
<div class="home-pad"></div>
</div>
<div class="justify"><span class="text">Young Women 4 Young Women is a </span><span class="red-text">support group</span><span class="text"> for women who have been affected by breast cancer. We meet once a month at Southmead Hospital in </span><span class="red-text">Bristol</span><span class="text"> for a chat and a cup of tea.<br /><br />
Over the past </span><span class="red-text">eleven years</span><span class="text"> we have welcomed women of all ages with a wide range of experiences. Whether you are looking for friendship, understanding, comfort, encouragement, laughter, company, support, compassion, of just </span><span class="red-text">somebody to talk to</span><span class="text"> who knows what it's like, we're here for you.</span>
<br /><br />
<div class="center"><span class="text">The kettles on so come on in!</span></div></div>
</div>
</div>
<div id="item2" class="about-area">
<a name="item2"></a>
<div class="content">
<div class="about-us-header-wrap">
<div class="about-us-pad"></div>
<div class="about-us-header-image"><div class="about-us-cleardiv"></div><h1>WHO ARE WE, AND WHAT DO WE DO?</h1></div>
</div>
<br />
<ul class="box">
<li><img src="images/portrait.png"></li>
</ul>
<div class="divide-wrap">
<div class="divide-bar"></div>
<div class="scroll"><a href="#item1" class="scroll-arrow panel"></a></div>
</div>
</div>
</div>
<div id="item3" class="when-area">
<a name="item3"></a>
<div class="content">
<div class="schedule-header-wrap">
<div class="schedule-header-image"><div class="about-us-cleardiv"></div><h1>WHO ARE WE, AND WHAT DO WE DO?</h1></div>
<div class="schedule-pad"></div>
</div>
</div>
</div>
<div id="item4" class="news-area">
<a name="item4"></a>
<div class="content">
<div class="in-the-news-header-wrap">
<div class="in-the-news-pad"></div>
<div class="in-the-news-header-image"><div class="in-the-news-cleardiv"></div><h1>DEVELOPMENTS & INNOVATIONS IN SURGERY & TREATMENT</h1></div>
</div>
</div>
</div>
<div id="item5" class="links-area">
<a name="item5"></a>
<div class="content">
<div class="useful-links-header-wrap">
<div class="useful-links-header-image"><div class="useful-links-cleardiv"></div><h1>SUPPORT, SERVICES & RETAILERS</h1></div>
<div class="useful-links-pad"></div>
</div>
</div>
</div>
<div id="item6" class="contact-area">
<a name="item6"></a>
<div class="content">
<div class="get-in-touch-header-wrap">
<div class="get-in-touch-pad"></div>
<div class="get-in-touch-header-image"><div class="get-in-touch-cleardiv"></div><h1>SEND US AN E-MAIL OR POP A LETTER IN THE POST</h1></div>
</div>
</div>
<div class="footer-wrapper">TEST</div>
</div>
</body>
</html>
不过，我想说该网站看起来相当不错。
Kp超平面
关于jquery - 如何在不破坏我的 JQuery ScrollTo 插件的情况下阻止此 div 位于滚动条顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7626223/