javascript - 单击时背景颜色消失-6ren

javascript - 单击时背景颜色消失

转载作者：可可西里更新时间：2023-11-01 13:22:56

24

4

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

<!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 {
  margin: 0;
  padding: 0;
  height: 2000px;
}

.topnav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100px;
  transition: 0.35s all ease;
  z-index: 1000;
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  margin: 20px 50px;;
  list-style: none;
  text-align: right;
  text-decoration: none;
  font-size: 17px;
  transition: 0.35s all ease;
}

a {
  text-decoration: none;
  color: black;
}
a:hover {
  text-decoration: none;
}


.topnav a:hover {
  text-decoration: none;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
  float: right;
  display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
  position: fixed;
  z-index: 1001;
 }
  .topnav.responsive .icon {
  position: fixed;
  right: 0;
  top: 0;
  }

  .topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  z-index: 1001;
  }
  .topnav.responsive a:hover {
  padding-left: 10px;
  color: white;
 }
 }

.banner {
  background: url('https://images.unsplash.com/photo-1431492299426-
2ea1ce429cc0?ixlib=rb-
0.3.5&q=80&fm=jpg&crop=entropy&s=135705633ad6367a0565fceae4a57372');
  background-position: center;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  z-index: 10;
  position: absolute;
}

.scrolled {
  min-height: 10px;
  color: inherit;
  background: black;
  transition: 0.35s all ease-in-out;
  opacity: 0.85;

}

.scrolled2 {
  color: white;
  opacity: 0.95;

  .topnav a:hover {
        background-color: red;
  }
}

https://codepen.io/anon/pen/RVYmKZ <-- 使用 Chrome https://jsfiddle.net/he7uhnya/

有一个gif所以你可以明白我的意思https://gyazo.com/aa5c558cea87f645a32817cba5ff56db

最佳答案

使用这个脚本标签-

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

关于javascript - 单击时背景颜色消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44046769/

24

4

0

文章推荐： windows - 如何在 cygwin 中启动 Windows GUI 程序？

文章推荐： php - cURL 中的数据二进制参数

javascript - 为什么我的新内容没有立即在页面上显示/消失，而是在手动刷新后显示/消失？
我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前，我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况，我必须刷新才能看到内容消失了。
Elixir Phoenix LiveView Echart 消失(消失)
抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像
javascript - 单击按钮时选择框出现/消失
搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失
ios - UILayoutViewController中的滚动时自动布局约束“消失”
我正在尝试使用自动布局使用“浮动”标题构建滚动视图。更确切地说，我正在尝试建立包含几列的日历视图。这些列中的每个列都应具有自己的标题，该标题应浮动在顶部，而该列可以垂直滚动到其下方。如果一切正常，则
jquery - 让具有类别的对象在循环中随机出现/消失
我正在尝试模仿星星背景。星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。 var star="•"; var numStars=100; for(var x=1;x•";
jQuery:单击时菜单出现/消失
我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。我的案例: 我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。我需要什么:
android - OnChildClickListener 消失
我有一个可扩展的 ListView ，当我点击一行时，它会触发 onChildClick 或 onGroupClick，具体取决于我点击的是子项还是组。如果我在 xml 布局文件中添加可点击的内容(
ios - NSMutableData 消失
在我的程序中，我有一个 NSMutableData 变量，用于收集来自 http://www.nhara.org/scored_races-2013.htm 的信息。 .大约第三次从网站获取信息后，当
android - Genymotion 消失
我一直在完美地使用 Genymotion，但是从最近几天开始我的 Genymotion 并打开它的 GPS 开始，我的 Genymotion 突然消失了。但是我的 eclipse 显示 Genymot
添加文档类型时 CSS 消失
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - 添加到购物车按钮在悬停时立即出现/消失
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
c++ - vector 消失
所以我的 Item::return_all() 有问题，因为我在 main.cpp 中调用它。早些时候我在 read_file() 和 for (auto data : example_item) 中
ios - UITableViewCells 消失
所有 UITableCells 在 UITableView 中滚动和触摸时消失。一切都以编程方式完成，我使用标准的 UITableViewCell 类。我在某处读到包含我的单元格数据的数组可能被清空
ios - UICollectionView 消失
我对 Swift 还很陌生。我的问题是我的 UICollectionView 正在消失。在 Xcode 中，它显示一切就绪，但当我在模拟器或设备上启动时，它消失了，只剩下导航栏和标签栏。有谁知道是什
javascript - 根据单选按钮的状态变化使子内容出现/消失
这是 this one的续题。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它
javascript - Canvas 消失
我用 JS 写了一个简单的脚本。当我将它放入 html 文档(在 body 标签的底部)时，它工作正常。当我尝试将它放入外部文档并链接它时，脚本运行但 canvas 元素消失(刚刚检查:当我将脚本放在
jquery - 滚动页面时使元素出现/消失
我正在尝试创建一个带有固定元素的滚动页面，当用户向下滚动页面时，该元素“始终”可见。例如，带有道路背景的汽车图像。因此，当用户向下滚动页面时，汽车看起来就像在路上行驶。虽然汽车出现在道路的顶部，但它必
javascript - 使文本在单击按钮时出现/消失
这个问题在这里已经有了答案: How can I change CSS display none or block property using jQuery? (15 个答案) 关闭 4 年前。
android - 如何避免旧的小部件在主要代码返工期间失败/消失？
我在市场上有一个支持小部件的应用程序。我对应用程序进行了一些重大更改，重新设计了很多内部结构，替换/重命名 Activity 等。其他更改包括从不同的共享首选项键获取小部件配置数据，尽管我已经编写了转
java - fragment 消失
我有一个 fragment alertsfragment.java，它有一个 GridView 布局，当我打开它时，它工作正常，但是当我在其他选项卡之间滑动时，它就消失了。为了解释更多，我有一个 Ac

首页

博学

6Ren·AI

商城

javascript - 单击时背景颜色消失