Fatal编程技术网
  • jquery/
  • Jquery 如何使导航开始透明，但在反向滚动时显示在滚动上并淡出；同时保持导航链接可见？

Jquery 如何使导航开始透明，但在反向滚动时显示在滚动上并淡出；同时保持导航链接可见？

jquery css

Jquery 如何使导航开始透明，但在反向滚动时显示在滚动上并淡出；同时保持导航链接可见？,jquery,css,Jquery,Css,理想情况下，我希望导航开始透明，导航链接始终可见。我尝试过多次重新编写js文件，但它没有响应或完全消失 <html lang="en"> <meta charset="utf-8" /> <head> <title>Example Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </h

理想情况下，我希望导航开始透明，导航链接始终可见。我尝试过多次重新编写js文件，但它没有响应或完全消失

<html lang="en">
<meta charset="utf-8" />

<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" />
</head>

  <body>

  <div id="container">
  <header>
  <div id="static_nav">
    <nav class='navbar'>
      <a href="#block_two">HOME</a>
      <a href="#block_three">ABOUT</a>
      <a href="#block_four">PEOPLE</a>
      <a href="#end_block">CONTACT</a>
      <a href="Member Login">LOG IN</a>
    </nav>
  </div>
</header>

<div id="block_two">
</div>

<div id="block_three">

  <div id="column-left">
    <header class="b3_hd">
      Hospitality
    </header>
    <div class="b3_pics">
      <div id="pic1">
      </div>
    </div>
    <p class="area_content">

    </p>
    </div>

  <div id="column-center">
    <header class="b3_hd">
    COLUMN CENTER
    </header>
    <div class="b3_pics">
      <div id="pic2">
      </div>
    </div>
    <p class="area_content">
    </p>
  </div>

  <div id="column-right">
    <header class="b3_hd">
      COLUMN RIGHT
    </header>
    <div class="b3_pics">
      <div id="pic3">
      </div>
    </div>
    <p class="area_content">
    </p>
  </div>
</div>

<div id="block_four">
  <header class="b4"> PEOPLE </header>
</div>

<div id="end_block">
  <header class="eb_header">
    CONTACT
  </header>
</div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</body>
</html>
jquery

//我无法找出我在js文件中做错了什么。我没有得到任何回应

(function($) {
$(document).ready(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 200) {
            $('#static_nav').fadeIn(500);
        } else {
            $('#static_nav').fadeOut(500);
        }
    });
  });
});
尝试此操作，将第一个位置与滚动后的位置进行比较。另外，我喜欢
$（文档）。滚动
；）


希望有帮助：）
你很接近了。首先，我注意到你的
html
上有
overflow:hidden
，因此你永远不会得到滚动条，因为所有内容都将被隐藏。我把它拿走了

然后，我默认为您的
div#static_nav
提供了一个透明的背景

然后使用jQuery函数，当它滚动到正确的位置时，我们添加新的类
.static\u nav\u full
，这为它提供了完整的背景



$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
$（'#static_nav'）.addClass（“static_nav_full”）；
}否则{
$（'#static_nav'）.removeClass（“static_nav_full”）；
}
});
});

html{
溢出：滚动；
}
身体{
身高：100%；
宽度：100%；
最大宽度：100%；
溢出y：自动；
溢出x：隐藏；
保证金：0；
}
分区#静态导航{
字体系列：Arial，无衬线；
填充顶部：10px；
文本对齐：右对齐；
宽度：100%；
高度：2米；
背景色：透明；
位置：固定；
不透明度：.90；
颜色：红色；
垂直对齐：中间对齐；
}
.静态导航已满{
背景色：#3A3DF！重要；
过渡：背景色1s；
}
静态导航a分区{
颜色：白色；
文字装饰：无；
右边填充：20px；
}
navbar先生{
右边填充：20px；
垫顶：2件；
}
分区#集装箱{
边缘顶部：10px高度：10vh宽度：100%；
背景色：#16BA81；
颜色：；
}
第二区{
背景色：；
填充顶部：10px；
高度：100vh；
背景图片：url（/New\u Website/sample\u image.png）；
背景尺寸：封面；
}
三区分区{
填充顶部：10px；
高度：100vh；
背景色：#e4e2；
}
div#列左{
填充顶部：60px；
浮动：左；
宽度：33%；
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica，无衬线；
}
div#右列{
填充顶部：60px；
浮动：左；
宽度：33%；
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica，无衬线；
}
div#立柱中心{
填充顶部：60px；
浮动：左；
宽度：33%；
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica，无衬线；
}
第四区{
填充：10px；
高度：100vh；
背景色：#e4e2；
}
分区端块{
填充：10px；
背景色：#F2F2；
高度：50vh；
文本对齐：居中；
}
.区域内容{
左侧填充：20px；
右边填充：20px；
字体大小：20px；
颜色：#3A3DF；
左边距：自动；
右边距：自动；
显示：内联块；
文本对齐：左对齐；
}
.eb_头{
字体大小：30px；
字体系列：Helvetica，无衬线；
颜色：#3A3DF；
}
.b3_图片{
最大宽度：继承；
身高：50%；
}
.b4{
填充顶部：60px；
最大宽度：继承；
文本对齐：居中；
字体大小：30px；
字体系列：Helvetica，无衬线；
颜色：#3A3DF；
}
.b3_hd{
颜色：#3A3DF；
}



款待




柱中心




右栏




人
接触

我使用引导创建透明的导航栏。因此，不要忘记包含以下脚本：


https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css


HTML:


我希望这有帮助。让我知道你是否还有其他问题
 老实说，这是一个更好的解决方案。我刚才才读到OP不想让它完全淡出YXD，不要夸张，但你看：这正是我需要的。谢谢你的帮助！！！现在看到它是有意义的。我很高兴它是有意义的，也很高兴能提供帮助。@Brad谢谢你在这方面的帮助。我还有一个问题。当我在浏览器中运行代码时，它无法识别脚本。我在html中插入了jquery文件的js标记，但什么也没发生。我做错了什么？您会推荐什么作为最佳实践？

  $(document).ready(function(){
    var oldScrollTop = 0;
    $(document).scroll(function(){
        if ($(this).scrollTop() > oldScrollTop) {
            $('#static_nav').fadeIn(500);
        } else {
            $('#static_nav').fadeOut(500);
        }
        oldScrollTop = $(this).scrollTop();
    });
  });



https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css



<nav class="navbar navbar-inverse navbar-fixed-top transparent">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" style="color:red" href="http://www.coding123.org/" target="newwindow">Dhouglas Oaktree</a>
    </div> <!-- .navbar-header -->
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Menu1</a></li>
        <li><a href="#portfolio">Menu2</a></li>
        <li><a href="#contact">Menu3</a></li>
      </ul>
    </div> <!-- .navbar-collapse -->
  </div> <!-- .container -->
</nav>



.transparent {
  background: transparent;
}

.navbar-inverse {
  transition: all 0.2s ease-in;
}
.navbar-brand a:hover{
    color:red;

}
#navbar a:hover {
    color:red;

}

#navbar:focus {
     color:blue;
}