单击

时间：2019-12-29 11:51:32

标签： html css navbar responsive sticky

当屏幕小于680px时，将出现汉堡菜单，并且单击时仅保留左侧的名称，这很好，就像https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

但是当点击汉堡菜单时，它不起作用。知道有什么问题吗？

我的html和脚本； 

function myFunction2() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
body {
  margin: 0;
}
.ad {
    background-color: #fbf4e9;
    text-align: center;
    padding:5px;
}
.sticky {
    position: fixed;
    top: 0;
}
ul.navbar {
    overflow:hidden;
    list-style-type:none;
    background-color:#f9eedd;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:10;
    } 
ul.navbar li a{ 
    display:block;
    color:#8e8275;
    text-decoration:none;
    text-align: center;
    padding: 13px 10px 13px 10px;
    margin: 10px 7px 10px 7px
    }
ul.navbar li.links{ float:left;}

ul.navbar li.icon {  display: none;}
@media screen and (max-width: 680px) {
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.navbar.responsive {position: relative;}
  ul.navbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.navbar.responsive li {
    float:none;
    display:inline;
  }
  ul.navbar.responsive li a {
    display: block;
    text-align: left;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ad">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
  </div> 
   <div>    <ul class="navbar" id=myTopnav>
    <li class="links"><a href=#home>Home</a></li>
      <li class="links"><a></a></li>
    <li class="links"><a href=#talen>Talen</a></li>
    <li class="links"><a href=#genres>Genres</a></li>
    <li class="links"><a href=#stijlen>Stijlen</a></li>   
     <li class=icon><a href="javascript:void(0);" onclick="myFunction()">
    <i class="fa fa-bars"></i>
     </a></li>
    </ul>    </div>

   <p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>

2 个答案:

答案 0 :(得分：1)

问题是您两次定义了myFunction()。所以第二个覆盖了第一个。

尝试给第二个起一个不同的名称，例如myFunction2()，它应该开始起作用。

编辑

我将脚本更改为：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction2()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

尝试一下：

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

window.onscroll = function() { myFunction2()};

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
body {
  margin: 0;
}
.ad {
    background-color: #fbf4e9;
    text-align: center;
    padding:5px;
}
.sticky {
    position: fixed;
    top: 0;
}
ul.navbar {
    overflow:hidden;
    list-style-type:none;
    background-color:#f9eedd;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:10;
    } 
ul.navbar li a{ 
    display:block;
    color:#8e8275;
    text-decoration:none;
    text-align: center;
    padding: 13px 10px 13px 10px;
    margin: 10px 7px 10px 7px
    }
ul.navbar li.links{ float:left;}

ul.navbar li.icon {  display: none;}
@media screen and (max-width: 680px) {
  ul.navbar li:not(:first-child) {display: none;}
  ul.navbar li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width: 680px) {
  ul.navbar.responsive {position: relative;}
  ul.navbar.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.navbar.responsive li {
    float:none;
    display:inline;
  }
  ul.navbar.responsive li a {
    display: block;
    text-align: left;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ad">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
  </div> 
   <div>    <ul class="navbar" id=myTopnav>
    <li class="links"><a href=#home>Home</a></li>
      <li class="links"><a></a></li>
    <li class="links"><a href=#talen>Talen</a></li>
    <li class="links"><a href=#genres>Genres</a></li>
    <li class="links"><a href=#stijlen>Stijlen</a></li>   
     <li class=icon><a href="javascript:void(0);" onclick="myFunction()">
    <i class="fa fa-bars"></i>
     </a></li>
    </ul>    </div>

   <p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>

答案 1 :(得分：0)

我个人认为您已经使它复杂化了。我看了您开始的W3Schools.com示例，并使用响应式移动下拉菜单重新编写了该示例。这是我个人做的方式，或者我想我做的方式。另外，如果我要继续进行下去，我会在栏的左侧添加一个主页图标。

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          rel="stylesheet" />
    <style>
        body {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: -webkit-sticky;
            /* Safari */
            position: sticky;
            top: 0;
            left: 0;
        }

        li {
            float: left;
        }

        .right {
            display: none;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }

        .mblMenu {
            width: 100%;
            height: auto;
            background-color: #333;
            display: none;
        }

        .show{
            display: block !important;
        }

        button {
            width: 50%;
            margin: 8px 25% !important;
            border: 2px solid #4B4;
            color: #4B4;
            font-size: 28px;
            background-color: #000;
            padding: 0;
            margin: 0;
        }

        @media only screen and (max-width: 700px) {
            ul li:not(:first-child){
                display: none;
            }
            .right {
                color: #4B4;
                margin: 0 12px 0 0;
                padding: 8px;
                display: block;
                float: right;
            }
        }

    </style>
</head>

<body>

    <div class="header">
        <h2>Scroll Down</h2>
        <p>Scroll down to see the sticky effect.</p>
    </div>

    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" >Contact</a></li>
       <i class="fa fa-bars fa-2x right" onclick="mblMenu()"></i>
    </ul>
    <div id="mblMenu" class="mblMenu">
        <button onclick="go2('home')">Home</button>
        <button onclick="go2('about')">About</button>
        <button onclick="go2('contact')">Contact</button>
    </div>

    <script type="text/javascript">
        function mblMenu(){
            let mblMenu = document.getElementById('mblMenu');
            mblMenu.classList.toggle('show');
        }
        function go2(url){
            window.location = url;
        }
    </script>

    <h3>Sticky Navigation Bar Example</h3>
    <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
    <p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky
        positioning. Safari requires a -webkit- prefix.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
        maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id
        agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his
        ad. Eum no molestiae voluptatibus.</p>

</body>

</html>
相关问题
最新问题