Как сделать липкую навигационную панель?

Это мой код, надеюсь, вы, ребята, поможете мне.Как сделать липкую навигационную панель?

Im пытается создать навигационную панель, которая находится в верхней части страницы и перемещается, когда пользователь прокручивает вниз.

<!DOCTYPE html> 
 
<html> 
 

 
<title>New Technology Planet</title> 
 

 
<head> 
 

 
    
 
<style> 
 

 

 
header { 
 
    background-image : url("pic15.jpg"); 
 
    color:white; 
 
    text-align:center; 
 
    padding:150px; 
 
} 
 

 

 

 

 

 

 
ul{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t 
 
\t 
 
} 
 

 
li { 
 
    float: left; 
 
    border-right:1px solid #bbb; 
 
} 
 

 
li.logo{ 
 
    border-right: none; 
 
\t font-family:Impact, Charcoal, sans-serif; 
 
\t color:white; 
 
\t font-size:40px; 
 
\t margin-top: 15px; 
 
\t padding-left:30px; 
 
\t } 
 

 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 25px 30px; 
 
    text-decoration: none; 
 
\t font-size:20px; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

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

 
    
 

 
    
 
#section { 
 
    width:350px; 
 
    float:center; 
 
    padding:10px; \t \t 
 
} 
 
#footer { 
 
    background-image : url("pic17.jpg"); 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:100px; \t \t 
 
} 
 

 
#header{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    } 
 

 
    
 

 
</style> 
 

 
\t 
 

 
</head> 
 

 

 
<body> 
 

 
     <header> 
 
      <h1>New Technology Planet</h1> 
 
\t \t \t <p><h3>The WebSite Is Still Under Construction By Laith SJ</h3></p> 
 
\t \t \t <p>Teamspeak3 & WebSites Hosting</p> 
 
      <p>Our goal is to give you the best what we can do!</p> 
 
     </header> 
 

 

 

 

 
\t \t 
 
\t \t 
 
\t \t 
 
      
 
       <!-- Navagator start --> 
 

 
\t \t \t <nav role='navigation'> 
 
        <ul> 
 
         <li class="logo">NewTecPlanet</li>       
 
         <ul style="float:right;list-style-type:none;"> 
 
\t \t \t \t \t   <li><a class="active" href="#home">Home</a></li> 
 
          <li><a href="#news">News|Updates</a></li> 
 
          <li><a href="#contact">Products</a></li> 
 
\t \t \t \t \t   <li><a href="#login">SignUp | Login</a></li> 
 
\t \t \t \t \t \t \t <li><a href="#about">About US</a></li> 
 
          <li><a href="#about">Contact Us</a></li> 
 
          
 
         </ul> 
 
        </ul> 
 
\t \t \t \t </nav> 
 
\t \t \t <!-- navagattor end code --> 
 

 
<!-- --> 
 

 
     
 
\t \t 
 
\t \t 
 
     <div id="section"> 
 
     <h2>test</h2> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
     <p>Test</p> 
 
      
 
     </div> 
 

 
     
 
\t <!-- last part of the page --> 
 
\t 
 
\t <div id="footer"> 
 
     New Technology Planet 
 
     </div> 
 
\t 
 
\t 
 
</body> 
 
</html>

Ребята, пожалуйста, не стесняйтесь редактировать сообщение, если вы думаете, что есть что-то хорошее будет помогать зрителям, и надеемся, что если вы можете изменить код, чтобы он мог хорошо работает.

Если вам нужен пример о том, что я спрашиваю, дайте мне знать, я не хочу публиковать другие сайты, поэтому я не нарушаю никаких правил.

Спасибо

источник

2016-01-27 Porg - Laith SJ

'позиция: fixed' фиксирует элемент в окно просмотра, а не документ. – GolezTrol

Я предполагаю, что вы имеете в виду, что по мере того, как верхняя часть окна проходит, панель навигации остается палкой и остается видимой? - возможный дубликат http://stackoverflow.com/questions/28452235/make-a-nav-bar-stick-to-the-top-when-scrolling-with-css –

да что я имею в виду, и когда пользователь прокрутка вверх навигационной панели возвращается к старой позиции. я устал смотреть на страницу, которую вы выстроились, но я ничего не мог понять, я попытался ее протестировать, но это не сработало. и могу ли я связать пример того, что я спрашиваю? –

Создать класс sticky и дать ему position:fixed. На прокрутке проверьте положение навигационной панели окна, затем назначьте этот класс вашему навигатору, чтобы вставить его в верхнюю часть экрана. Смотрите пример ниже:

JSFiddle

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 = ''; 
 
    } 
 
}

header { 
 
    background-image: url("pic15.jpg"); 
 
    color: #5A4A4A; 
 
    text-align: center; 
 
    } 
 
    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: 40px; 
 
    margin-top: 15px; 
 
    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: 20px; 
 
    } 
 
    li a:hover:not(.active) { 
 
    background-color: #111; 
 
    } 
 
    .active { 
 
    background-color: #4CAF50; 
 
    } 
 
    #section { 
 
    width: 350px; 
 
    float: center; 
 
    padding: 10px; 
 
    } 
 
    #footer { 
 
    background-image: url("pic17.jpg"); 
 
    color: white; 
 
    clear: both; 
 
    text-align: center; 
 
    padding: 100px; 
 
    } 
 
    #header { 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    } 
 
    .sticky { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    }

<header> 
 
    <h1>New Technology Planet</h1> 
 
    <p> 
 
    <h3>The WebSite Is Still Under Construction By Laith SJ</h3> 
 
    </p> 
 
    <p>Teamspeak3 & WebSites Hosting</p> 
 
    <p>Our goal is to give you the best what we can do!</p> 
 
</header> 
 

 

 
<!-- Navagator start --> 
 

 
<nav role='navigation' id="topNav" class=""> 
 
    <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 --> 
 

 
<!-- --> 
 

 

 

 

 
<div id="section"> 
 
    <h2>test</h2> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 
    <p>Test</p> 
 

 
</div> 
 

 

 
<!-- last part of the page --> 
 

 
<div id="footer"> 
 
    New Technology Planet 
 
</div>

источник

2016-01-27 21:47:42

Я пробовал, но это не сработало, если вы протестировали его и сработали с вами, потому что я его скопировал и прошёл. –

У вас есть ошибки в консоли? –

Работая здесь: https://jsfiddle.net/c0e5ez9m/2/ –

Как сделать липкую навигационную панель?

ответ

Смежные вопросы