个人中心
gpt4 book ai didi

html - 当用户向下滚动时 Pic 越过导航栏

转载 作者：行者123 更新时间：2023-11-28 06:29:08 25 4
gpt4 key购买 nike

我创建了导航栏(需要一些帮助)，当用户向下滚动时，导航栏将随页面移动(固定位置)，但是当我将照片添加到第二部分并且当我向下滚动图像时越过导航栏，我仍然不知道为什么!我读到你需要添加类似这样的内容 (z-index -100)，但我不知道该放在哪里，也不知道这是否可行，希望你们能帮助我。

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"

var topNav = document.getElementById("topNav"),
  stop = topNav.offsetTop,
  docBody = document.documentElement || document.body.parentNode || document.body,
  hasOffset = window.pageYOffset !== undefined,
  scrollTop;

window.onscroll = function(e) {
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
  if (scrollTop >= stop) {
    topNav.className = 'sticky';
  } else {
    topNav.className = '';
  }
}

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},
.sticky {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 
/* fisrt section */ 
 
header {
   font-family: "Comic Sans MS", cursive, sans-serif;
 } 
 
header {
   background-image: url("pic19.jpg");
   color: white;
   text-align: left;
   width:auto;
   height:450px;
   padding-top: 50px;
 }
 
.L{
width:700px;
height:auto;
}
 
p.head{
    font-family: Impact, Charcoal, sans-serif;
    color: white;
    font-size:50px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 45px;
 }
 
 p.L1{
    font-family: Impact, Charcoal, sans-serif;
    color: white;
	font-size:20px;
	top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 60px;
	width:450px;
	
	}
	
 
img{
    position: absolute;
    right: 90px;
    top: 90px;
    width: 42%;
    height: auto;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
}


 
 
/* seconed section */  
 

 
.S2{
   position:static;
   background-image: url("pic16.jpg");
   width: auto;
   height:450px;
   float: center;
   padding: 10px;
   color:white;  
  }

h1{ 
   padding-bottom:0px;
   padding-top:50px;
   padding-left:70px;
   font-size:30px;   
 }
 
 
p.par{
   padding-bottom:0px;
   padding-top:3px;
   padding-left:100px;
   width:550px;
   font-size:20px;
   }
 
   
img.p2{

    top:660px;
    left:700px;
    right:25px;
    width: 42%;
    height: auto;
	
    }
  


#H2{
   background-image: url("pic16.jpg");
   color: white;
   text-align: left;
   height:450px;
   padding-top: 50px;
   width:auto;
   }
 


 
 

 
 
 
#footer {
   background-image: url("pic17.jpg");
   color: white;
   clear: both;
   text-align: center;
   padding: 100px;
 }


 
 /*   navabar */
 
 
 
 
 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
 }
 
 li {
   float: left;
   border-right: 1px solid #bbb;
 }
 
 li.logo {
   border-right: none;
   font-family: Impact, Charcoal, sans-serif;
   color: white;
   font-size: 50px;
   margin-top: 5px;
   padding-left: 30px;
 }
 
 li:last-child {
   border-right: none;
 }
 
 li a {
   display: block;
   color: white;
   text-align: center;
   padding: 25px 30px;
   text-decoration: none;
   font-size: 15px;
 }
 
 li a:hover:not(.active) {
   background-color: #111;
 }
 
 .active {
   background-color: #4CAF50;
 }
<title>New Technology Planet</title>
<head>
   <link rel="stylesheet" href="home.css">
</head>
<body>
   <!-- Header of the page -->     
   <header>
      <section class="L">
         <p class="head">
            New Technology Planet
         </p>
         <p class="L1">
            We Hosts TeamSpeak 3 servers & websites <br><br>
            "Our Goal Is Presenting To You The Best Services That We Can Do And The Best Prices That You Will Find"<br><br>
            Teamspeak 3 is your new way to communicate with your friends and your employee 
         </p>
      </section>
      <div id="slideshow">
         <div>                      
            <img src="ts.png">
         </div>
         <div>					  
            <img src="ts3.png">
         </div>
         <div>					  
            <img src="ts4.png">
         </div>
      </div>
   </header>
   <!-- Header of the page >
      <!-- navagattor start code -->
   <nav role='navigation' id="topNav">
      <ul>
         <li class="logo">NewTecPlanet</li>
         <ul style="float:right;list-style-type:none;">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News|Updates</a></li>
            <li><a href="#contact">Products</a></li>
            <li><a href="#login">SignUp | Login</a></li>
            <li><a href="#about">About US</a></li>
            <li><a href="#about">Contact Us</a></li>
         </ul>
      </ul>
   </nav>
   <!-- navagattor end code -->
   <!-- second section or part1 start -->
   <div class="S2">
      <section class="L">
         <h1>What is TeamSpeak 3 ?</h1>
         <p class="par">TeamSpeak is proprietary voice-over-Internet Protocol (VoIP) software that allows computer users to speak on a chat channel with fellow computer users, much like a telephone conference call. A TeamSpeak user will often wear a headset with a microphone. Users use the TeamSpeak client software to connect to a TeamSpeak server of their choice, from there they can join chat channels.</p>
         <p class="par">The target audience for TeamSpeak is gamers, who can use the software to communicate with other players on the same team of a multiplayer game. Communicating by voice gives a competitive advantage by allowing players to keep their hands on the controls.</p>
      </section>
      <img class="p2" src="pic20.png">                       
   </div>
   <!-- second section or part1 end -->
   <!-- theird section -->
   <!-- the end of the third section >
      < !-- final part -->
   <div id="footer">
      New Technology Planet
   </div>
   <!-- final part end -->

最佳答案

您可以将 z-index 用于导航，如下所示:

nav {
z-index: 999;
}

编辑:

使用以下方法修复内容的移动:

img.p2{
   padding-top: 50px;
   left: 700px;
   right: 25px;
   width: 42%;
   height: auto;
   position: static;
}
section.L{
   float: left;
}

关于html - 当用户向下滚动时 Pic 越过导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35096598/

25 4 0
文章推荐： ios - 在 TableView 上显示和打开保存的文件
文章推荐： c++ - 从 Windows Phone 8 项目升级到 Windows Phone 8.1
文章推荐： c++ - 使用 C++ 在 directX 11 中的 VS 2013 中获取 LNK 2019 错误
文章推荐： c++ - 如何将 GtkSwitch 放入 GtkTreeView 的单元格(列)中？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com