Javascript 设置溢出时导航栏隐藏不起作用：div中的自动_Javascript_Html_Css

Javascript 设置溢出时导航栏隐藏不起作用：div中的自动

javascript html css

Javascript 设置溢出时导航栏隐藏不起作用：div中的自动,javascript,html,css,Javascript,Html,Css,所以我的网站是这样建立的： <body> <nav></nav> <div id="background"> <script></script> <script></script> <div id="content"> <section id="about"></section> <sect

所以我的网站是这样建立的：

<body>
   <nav></nav>
   <div id="background">
     <script></script>
     <script></script>
     <div id="content">
       <section id="about"></section>
       <section id="other"></section>
     </div>
   </div>
   <div id="footer"></div>
</body>

<body>
   <div class="stars">
   <div class="twinkling">
   <div class="clouds">
   <nav></nav>
   <div id="background">
     <script></script>
     <script></script>
     <div id="content">
       <section id="about"></section>
       <section id="other"></section>
     </div>
   </div>
   <div id="footer"></div>
   </div></div></div>
</body>

CSS

通过胡闹和一些研究，我想出了如何使用

overflow: auto;

在提供的css中（从笔链接）。然而，这样做会使滚动条留在屏幕上，基本上就像js不在屏幕上一样。我还注意到，当溢出设置为原样时，滚动条显示在标题下，而当一切正常工作时，滚动条显示在标题上

再说一次，我的主要目标是将那支笔设置为背景，所以如果有更有效的方法，请让我知道，但我目前面临的问题是，我的滚动条不再像以前那样隐藏和转换。。。有什么想法吗

提前谢谢

编辑：

我当前的代码：

HTML

Javascript

(function(){
    var documentElem = $(document),
        nav = $('nav'),
        lastScrollTop = 0;
    documentElem.on('scroll', function(){
        var currentScrollTop = $(this).scrollTop();
        //down
        if(currentScrollTop> lastScrollTop) nav.addClass('hidden');
        //upper
        else nav.removeClass('hidden');
        lastScrollTop = currentScrollTop;
    });
})();

尝试此代码

将

var documentElem=$（document）

更改为

var documentElem=$（'.clouds'）

。当您为

这些类设置溢出：auto
时，您无法获取文档的scrollTop（）。因此请检查scrollTop（）中的任何一个类

更新：
要避免导航栏覆盖滚动条，请使用以下代码
var newWidth=$('.clouds').innerWidth()-$('.clouds')[0].scrollWidth;

nav.css({ 'width': 'calc(100% - ' + newWidth+ 'px)' });

你能在上面的codepen
中复制你当前的问题吗？我不能这样做，所以我可以发送链接，所以我只是上传了我的代码。如果您的意思是该问题是否发生在代码笔中，是的，它的行为与我的浏览器上的行为相同。那么您希望显示滚动条还是隐藏滚动条，但仍能滚动？请参见此，我希望显示导航条，然后当我向下滚动时，导航条应消失。然后当我向上滚动时，导航条会再次出现。如果你删除了我在css代码中指出的那一行，你可以看到想要的效果，而如果你把那一行添加回去，你可以看到我想要背景做什么。虽然我很喜欢没有滚动条时的外观，但当导航条再次工作时，我会继续使用滚动条！哇，这解决了我的大部分问题！有几件事。。。你能解释一下为什么会这样吗？我是js新手，所以我不能真正理解$（文档）部分是如何工作的。此外，在执行此操作时，显示时的导航栏会覆盖滚动条，是否有办法解决此问题？此处$（文档）不起作用，因为它没有溢出内容。其高度与设置溢出时的正文高度相同：滚动查看.stars、.flanking、.clouds这些类。请参阅上面的更新答案。很抱歉，回复时间过长！不幸的是，即使在实现了这一点之后，滚动条仍然被覆盖。。到目前为止，我正在使用谷歌chrome来测试这是否改变了什么
<body>
        <div class="stars">
        <div class="twinkling">
        <div class="clouds">
        <nav>
            <ul>
                <li><a href="#title1">Title1</a></li>
                <li><a href="#title2">title2</a></li>
                <li><a href="#title3">title3</a></li>
                <li><a href="#title4">title4</a></li>
                <li><a href="#links">Links</a></li>
            </ul>
        </nav>
        <div id="background">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script src="../js/script.js" type="text/javascript"></script>
            <div id="content">
                <section id="title1">
                    <h1>Title1</h1>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.
                    </p>
                </section>
                <section id="title2">
                    <h1>title2</h1>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.
                    </p>
                </section>
                <section id="title3">
                    <h1>title3</h1>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.
                    </p>
                </section>
                <section id="title4">
                    <h1>title4</h1>
                    <p> Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.
                    </p>
                </section>
                <section id="links">
                    <h1>Links</h1>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id magna id est tincidunt semper. Duis neque nisi, bibendum ac metus a, hendrerit ullamcorper nisl. Cras sed nibh ipsum. Morbi justo sapien, convallis a pellentesque et, maximus at risus. Ut sollicitudin convallis faucibus. Etiam tincidunt dignissim convallis. Donec malesuada fringilla tortor sit amet imperdiet.

Donec vel malesuada leo. Sed molestie pharetra mi, sed feugiat nisi tempor a. Donec vitae tortor nibh. Morbi ac lorem sit amet diam lobortis pellentesque et quis lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque non luctus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus scelerisque varius elit a auctor. Vivamus vel auctor ipsum, viverra interdum lacus. Proin ullamcorper blandit magna, in dapibus mauris rutrum eget. Phasellus facilisis justo non libero sagittis, in tempus diam pellentesque. Donec varius nisl eu purus viverra, nec tristique tortor tristique. Vivamus varius commodo diam sed consequat.

Nulla convallis iaculis nunc, eu congue ante pellentesque non. Maecenas sagittis scelerisque eros, vel ullamcorper orci blandit ut. Nullam aliquet mattis nibh, vitae eleifend orci ultrices quis. Nulla facilisi. Etiam placerat nibh et enim venenatis sagittis. Ut erat metus, mollis sit amet tortor vitae, ultrices tristique nulla. Nam elementum tincidunt felis sed hendrerit. Nam ut purus nibh.
                    </p>
                </section>
            </div>
            <div id="footer">
                <footer>

                </footer>
            </div>
        </div></div></div></div>
    </body>
</html>

            * {
                margin: 0;
                padding: 0;
            }
            nav {
                position: fixed;
                width: 100%;
                top: 0;
                background-color: #7b7d7d;
                text-align: center;
                padding: 1.25rem 0;
                transition: all 0.5s ease;
            }
            nav.hidden {
                transform: translate3d(0,-100%,0);
            }
            nav ul li{
                display: inline-block;
                margin-right: 3.75rem;
            }
            nav ul li:last-child{
                margin-right: 0;
            }
            nav ul li a {
                text-decoration: none;
                text-transform: uppercase;
                color: #ecf0f1;
                font-family: Arial, sans-serif;
            }
            #background{
            }
            #content{
                padding-top: 4.25rem;
            }
            #title1{
                width: 50%;
                margin-left: 25%;
                padding-bottom: 1%;
                margin-bottom: 1%;
                border: 5px solid #d0d3d4;
                background: #2C3E50;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4CA1AF, #2C3E50);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4CA1AF, #2C3E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

                text-align: center;
            }
            #title1 h1{
                padding-bottom: 3%;
                padding-top: 1%;
            }
            #title1 p{
                padding-left: 10%;
                padding-right: 10%;
            }
            #title2{
                width: 50%;
                margin-left: 25%;
                padding-bottom: 1%;
                margin-bottom: 1%;
                border: 5px solid #d0d3d4;
                background: #283048;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

                text-align: center;
            }
            #title2 h1{
                padding-bottom: 3%;
                padding-top: 1%;
            }
            #title2 p{
                padding-left: 10%;
                padding-right: 10%;
            }
            #title3{
                width: 50%;
                margin-left: 25%;
                padding-bottom: 1%;
                margin-bottom: 1%;
                border: 5px solid #d0d3d4;
                background: #ffd89b;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #19547b, #ffd89b);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #19547b, #ffd89b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

                text-align: center;
            }
            #title3 h1{
                padding-bottom: 3%;
                padding-top: 1%;
            }
            #title3 p{
                padding-left: 10%;
                padding-right: 10%;
            }
            #title4{
                width: 50%;
                margin-left: 25%;
                padding-bottom: 1%;
                margin-bottom: 1%;
                border: 5px solid #d0d3d4;
                background: #283c86;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #45a247, #283c86);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #45a247, #283c86); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


                text-align: center;
            }
            #title4 h1{
                padding-bottom: 3%;
                padding-top: 1%;
            }
            #title4 p{
                padding-left: 10%;
                padding-right: 10%;
            }
            #links{
                width: 50%;
                margin-left: 25%;
                padding-bottom: 1%;
                margin-bottom: 1%;
                border: 5px solid #d0d3d4;
                background: #C33764;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

                text-align: center;
            }
            #links h1{
                padding-bottom: 3%;
                padding-top: 1%;
            }
            #links p{
                padding-left: 10%;
                padding-right: 10%;
            }
            #footer{
                clear: both;
                margin: auto;
                width: 100%;
                bottom: 0;
                background-color: #7b7d7d;
                text-align: center;
                padding: 0.5rem 0;
            }
            #footer a{
                font-size: 12px;
                text-decoration: none;
                text-transform: uppercase;
                color: #ecf0f1;
                font-family: Arial, sans-serif;
            }























            @keyframes move-twink-back {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: -10000px 5000px;
                }
        }

        @-webkit-keyframes move-twink-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: -10000px 5000px;
          }
        }

        @-moz-keyframes move-twink-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: -10000px 5000px;
          }
        }

        @-ms-keyframes move-twink-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: -10000px 5000px;
          }
        }

        @keyframes move-clouds-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: 10000px 0;
          }
        }

        @-webkit-keyframes move-clouds-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: 10000px 0;
          }
        }

        @-moz-keyframes move-clouds-back {
          from {
            background-position: 0 0;
          }
          to {
            background-position: 10000px 0;
          }
        }

        @-ms-keyframes move-clouds-back {
          from {
            background-position: 0;
          }
          to {
            background-position: 10000px 0;
          }
        }

        .stars,
        .twinkling,
        .clouds {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          overflow: auto; /*removing this makes the background not fit, but the scrollbar will work*/
          display: block;
        }

        .stars {
          background: #000 url(http://sylvaingarnot.fr/media/stars.png) repeat top center;
          z-index: 0;
        }

        .twinkling {
          background: transparent url(http://sylvaingarnot.fr/media/twinkling.png) repeat top center;
          z-index: 1;
          -moz-animation: move-twink-back 200s linear infinite;
          -ms-animation: move-twink-back 200s linear infinite;
          -o-animation: move-twink-back 200s linear infinite;
          -webkit-animation: move-twink-back 200s linear infinite;
          animation: move-twink-back 200s linear infinite;
        }

        .clouds {
          background: transparent url(http://sylvaingarnot.fr/media/clouds.png) repeat top center;
          z-index: 3;
          -moz-animation: move-clouds-back 200s linear infinite;
          -ms-animation: move-clouds-back 200s linear infinite;
          -o-animation: move-clouds-back 200s linear infinite;
          -webkit-animation: move-clouds-back 200s linear infinite;
          animation: move-clouds-back 200s linear infinite;
        }

(function(){
    var documentElem = $(document),
        nav = $('nav'),
        lastScrollTop = 0;
    documentElem.on('scroll', function(){
        var currentScrollTop = $(this).scrollTop();
        //down
        if(currentScrollTop> lastScrollTop) nav.addClass('hidden');
        //upper
        else nav.removeClass('hidden');
        lastScrollTop = currentScrollTop;
    });
})();

var newWidth=$('.clouds').innerWidth()-$('.clouds')[0].scrollWidth;

nav.css({ 'width': 'calc(100% - ' + newWidth+ 'px)' });