Javascript 背景色在单击时消失_Javascript_Html_Css_Navbar

Javascript 背景色在单击时消失

javascript html css

Javascript 背景色在单击时消失,javascript,html,css,navbar,Javascript,Html,Css,Navbar,我的问题是，当屏幕低于600px时，导航栏变成了下拉导航栏。现在的问题是，当你向下滚动100px时，导航栏会有一个黑色背景，但当我想打开下拉菜单时，黑色背景会消失 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <link rel="stylesheet" type="t

我的问题是，当屏幕低于600px时，导航栏变成了下拉导航栏。现在的问题是，当你向下滚动100px时，导航栏会有一个黑色背景，但当我想打开下拉菜单时，黑色背景会消失

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="costume.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- Connect stylesheet -->
        <link rel="stylesheet" href="costume.scss">
  </head>
  <body>
        <div class="topnav" id="myTopnav" align="left">
              <a href=""><p>Home</p></a>
              <a href=""><p>Portfolio</p></a>
              <a href=""><p>About</p></a>
              <a href=""><p>Impressum</p></a>
              <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
        </div>
        <div class="banner topnav"></div>
        <div id="wrapper"></div>

  <script>
        $(function(){
        $(window).scroll(function() {
              if($(window).scrollTop() >= 100) {
              $('div#myTopnav').addClass('scrolled');
        } else {
              $('div#myTopnav ').removeClass('scrolled');
                    }
              });
        });

        $(function(){
        $(window).scroll(function() {
              if($(window).scrollTop() >= 100) {
              $('a').addClass('scrolled2');
        } else {
              $('a').removeClass('scrolled2');
                    }
              });
        });


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

  </script>

  </body>
</html>

您可以使用引导获得更好的导航栏

另请参阅：

.body{
垫面：10%；
}


切换导航















提交












@
@example.com
$
.00
你的虚荣网址
https://example.com/users/
@
@example.com
$
.00
你的虚荣网址
https://example.com/users/
@
@example.com
$
.00
你的虚荣网址
https://example.com/users/
@
@example.com
$
.00
你的虚荣网址
https://example.com/users/
@
@example.com
$
.00
你的虚荣网址
https://example.com/users/
@
@example.com
$
.00
你的虚荣网址
https://example.com/users/

使用此脚本标记-

<script>
    $(window).scroll(function() {
       if($(window).scrollTop() >= 100) {
          $('div#myTopnav').addClass('scrolled');
          $('a').addClass('scrolled2');
       } 
       else {
          $('div#myTopnav ').removeClass('scrolled');
          $('a').removeClass('scrolled2');
        }
      });
    function myFunction() {
        $("#myTopnav").toggleClass('responsive');

    }

 </script>


$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=100）{
$（'div#myTopnav'）.addClass（'scrolled'）；
$（'a'）.addClass（'scrolled2'）；
} 
否则{
$（'div#myTopnav'）.removeClass（'scrolled'）；
$（'a'）.removeClass（'scrolled2'）；
}
});
函数myFunction（）{
$（“#myTopnav”）.toggleClass（'responsive'）；
}

jsFiddle可能会有所帮助……您能创建一个代码的目录吗？这样我们就更容易帮助你了。我添加了一个链接，但在chrome中打开它。。。具有讽刺意味的是，有些东西在firefox中不起作用，即使我总是在我的本地文件上使用firefox，字体颜色是黑色而不是蓝色，就像在这种情况下一样，他编码了OpenOne。我添加了解决方案，请检查相同的解决方案，如果你需要什么，请在这里发表评论。如果你喜欢，请投票。好的，我试过了，但它也不起作用。我有一个gif，所以你看到了我的想法我的意思是看到这个和解决方案中给出的不一样。你需要用我的解决方案脚本替换整个脚本标记，嗯，我做了。。。但现在我清除了缓存，也许这就是问题所在，但现在它工作了，非常感谢！

<script>
    $(window).scroll(function() {
       if($(window).scrollTop() >= 100) {
          $('div#myTopnav').addClass('scrolled');
          $('a').addClass('scrolled2');
       } 
       else {
          $('div#myTopnav ').removeClass('scrolled');
          $('a').removeClass('scrolled2');
        }
      });
    function myFunction() {
        $("#myTopnav").toggleClass('responsive');

    }

 </script>