Как я могу уменьшить панель навигации, которая находится в середине страницы, и заставить ее придерживаться верхней части страницы при прокрутке?

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

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

Важными разделами, вероятно, являются javascript, а затем место в css прокомментировано как «место, где может быть проблема с прокруткой»

 {amp}lt;!doctype html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;The Universe{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="style.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="sunrise"{amp}gt; {amp}lt;section{amp}gt; {amp}lt;h1{amp}gt;The Universe{amp}lt;/h1{amp}gt; {amp}lt;p class="subheader"{amp}gt;and its mysteries{amp}lt;/p{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="fun_facts"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;i{amp}gt;“Once you can accept the universe as matter expanding into nothing that is something,{amp}lt;br{amp}gt; wearing stripes with plaid comes easy.”{amp}lt;/i{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;nav{amp}gt; {amp}lt;a href="#" class="hide-desktop"{amp}gt; {amp}lt;img src="obrazky/gold_menu_icon.png" alt="toggle menu" class="menu" id="menu"{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;ul class="show-desktop hide-mobile"{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#xxx"{amp}gt;Domů{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#yyy"{amp}gt;O mně{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;{amp}lt;a href="#zzz"{amp}gt;Kontakt{amp}lt;/a{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;div class="stars"{amp}gt; {amp}lt;div class="stars_content" id="xxx"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;h2{amp}gt;AAAAAAAA AAA AAAAA{amp}lt;/h2{amp}gt;{amp}lt;hr{amp}gt; {amp}lt;p{amp}gt;sss{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="stars"{amp}gt; {amp}lt;div class="stars_content" id="yyy"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;h2{amp}gt;BBBBBBB BBB BBBBBB{amp}lt;/h2{amp}gt;{amp}lt;hr{amp}gt; {amp}lt;p{amp}gt;sss{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="stars"{amp}gt; {amp}lt;div class="stars_content" id="zzz"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;h2{amp}gt;CCCC CCC CCCCCC{amp}lt;/h2{amp}gt;{amp}lt;hr{amp}gt; {amp}lt;p{amp}gt;sss{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;footer class="footer"{amp}gt; {amp}lt;/footer{amp}gt; {amp}lt;script type="text/javascript"{amp}gt; /* script that makes navbar shrink on scroll and than resize when I get back to the top */ var position = 1; $(window).on("scroll", function() { if (position {amp}lt;= -705) { console.log(position = $('a').offset().top - $(window).scrollTop()); $("nav").addClass("class_nav"); //$("nav").addClass("class_nav_ul_li"); } else { console.log(position = $('nav').offset().top - $(window).scrollTop()); $("nav").removeClass("class_nav"); //$("nav").removeClass("class_nav_ul_li"); } }) //scrolling animation to each div // Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') {amp}amp;{amp}amp; location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name='   this.hash.slice(1)   ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
 body { margin: 0; background-color: black; } p { font-size: .9em; line-height: 1.6em; } ul { list-style: none; margin: 0; padding: 0; } .container { text-align: center; //padding: .8em 1.2em; //background: yellow; } header { //background: yellow; /* needed to have section aligned to the center of THE PAGE not just center of its own side */ } section { margin-top: 4em; /*FIXNUTI GOLD MENU BUTTONU;*/ //background: green; margin-left: auto; margin-right: auto; } .sunrise { background: url(obrazky/sunrise.jpg) no-repeat center; background-size: cover; background-attachment: fixed; height: auto; padding-bottom: 10px; display: flex; } .menu { width: 50px; //margin: 100% 0% 0% 100%; margin-top: 60%; margin-left: 60%; } h1, h2, .subheader { position: relative; z-index: 3; } h1 { font-size: 8em; color: gold; text-shadow: 5px 5px 8px gold; margin-top: -30px; } h2 { font-size: 3em; //color: rgb(7, 207, 200); color: rgb(218, 165, 32); //text-shadow: 5px 5px 8px rgb(5 237 218); } .subheader { font-size: 5em; color: gold; text-shadow: 5px 5px 8px gold; } .fun_facts { background-color: transparent; padding-top: 50px; padding-bottom: auto; font-size: 2.5em; color: white; text-shadow: 5px 5px 8px white; } .stars { background: url(obrazky/moon.jpg) no-repeat center; background-size: cover; background-attachment: fixed; margin-top: -17em; padding: 12em 100px; /* padding: 2em 20px; */ } .stars_content { margin-top: 17em; color: white; padding: 50px 150px 100px; //background: rgba(8, 6, 46, 0.85); //background: rgba(7, 59, 59, 0.85); //background: rgba(7, 50, 59, 0.85); background: rgba(38, 40, 41, 0.85); height: 700px; border-radius: 100px; // clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%); } .stars_content p { margin-top: 10px; font-size: 50px; color: rgb(218, 165, 32); } .stars_content hr { border: 5px solid rgb(218, 165, 32); /*5 240 218*/ margin: -10px -140px; border-radius: 200px; } /************* PLACE WHERE MIGHT BE THE PROBLEM WITH SCROLLING *************/ .show-desktop { display: block; margin: 0 auto 13% auto; } .hide-desktop { display: none; } nav { margin-top: 3.5em; margin-bottom: 7em; background: url(obrazky/earth.jpg) no-repeat center; background-size: cover; background-attachment: fixed; height: auto; display: flex; clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%); } nav.class_nav { clip-path: none; z-index: 4; height: 100px; top: 0; position: sticky; } nav.class_nav ul li { padding: 1em; margin-top: 0; } nav.class_nav ul li a{ font-size: 20px; padding: 1em 2em; } nav ul { background: none; height: auto; width: auto; padding-bottom: 0px; } nav ul li { float: left; padding-top: 10.5em; padding-bottom: 0; margin-left: auto; margin-right: auto; } nav ul li a { color: gold; background-color: #1a1400; text-align: center; padding: 1em 2em; font-size: 40px; text-decoration: none; display: block; border-radius: 80px; box-shadow: 10px 10px 15px black; } nav ul li a:hover { background-color: #4d3d00; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector