当前位置： 文江博客话题详情

如何阻止该 div 位于滚动条顶部而不破坏我的 JQuery ScrollTo 插件？

发布于 2024-12-07 22:26:04 字数 465 浏览 0 评论 0原文

我正在构建的网站遇到了一些问题。我正在使用 jQuery 插件“滚动到”，因为该网站是一个包含不同部分的完整页面。现在，当用户向下滚动时，我试图将导航栏固定在页面顶部，但目前它位于滚动条的顶部。

我找到了如何阻止它坐在滚动条顶部的答案，它说我应该删除“overflow:auto;”来自“包装器”div，但不知何故，这杀死了我的 ScrollTo 插件，并且链接不再有效。

我希望页面右侧有一个滚动条，用户可以使用它向下滚动，但我希望大的白色导航栏保持固定在顶部。

我的网站可以从此链接下载> http://dl.dropbox.com/u/14917277/YW4YW%20Website.zip - 它只是一个小网站，因此下载不需要两秒钟。

非常感谢任何帮助，非常感谢各位！

原文

I am having a little bit of trouble with a website I'm building. I am using the jQuery plug-in "scroll to" as the website is one complete page with different sections. Now I am trying to keep the navigation bar fixed at the top of the page when the user scrolls down, but at the moment it is sitting over the top of the scrollbar.

I found an answer for how to stop it sitting on top of the scrollbar, which said that I should remove "overflow:auto;" from the 'wrapper' div, but somehow, this killed my ScrollTo plug in, and the links no longer worked.

I want one scrollbar on the right hand side of the page, that users can use to scroll down, but I want the big white navigation bar to stay at fixed at the top.

My website can be downloaded from this link > http://dl.dropbox.com/u/14917277/YW4YW%20Website.zip -
It is only a small website so will not take two seconds to download.

Any help is HUGELY appreciated, thanks a load guys and girls!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

左秋 2024-12-14 22:26:04

为什么要将内容放在包装器溢出的 div 中？发生这种情况是因为包装器的 z 索引低于顶部栏。取下包装纸。让内容正常溢出即可！

将您的索引文件替换为：

<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超平面

Why are putting your content in a wrapper overflowing div? This is happening because the wrapper has a z-index that is lower than the top bar. Remove the wrapper. Just let the content overflow normally!

Replace your index file with this:

<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>

However, I would like to say the site is looking quite nice.

Kpsuperplane

回复 原文
~没有更多了~

关于作者

温柔戏命师

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文