堆棧內存溢出
  簡體   English   中英

如何縮小頁面中間的導航欄並使其在滾動時粘在頁面頂部？

[英]How can I shrink a navbar that is in the middle of the page and make it stick to the top of the page on scroll?

 原文  2019-10-02 20:26:12  8   1    javascript/ jquery/ html/ css

問題描述

當我回到頁面中間的導航欄頂部時，我總是會出現滾動問題。 當我向下滾動時，它會收縮並正確粘貼，但回到頂部總是會移動我的滾動條，因為我的導航欄會重新調整大小。

重要的部分可能是 javascript 而不是 css 中的地方評論為“可能出現滾動問題的地方”

<!doctype html>
<html>
<head>
    <title>The Universe</title>
    <link rel="stylesheet" href="style.css">
    <script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous">
    </script>
</head>
<body>

    <div class="container">
        <div class="sunrise">

            <section>
                <h1>The Universe</h1>
                <p class="subheader">and its mysteries</p>
            </section>
        </div>   
    </div>



    <div class="fun_facts"> 
        <div class="container">

            <i>“Once you can accept the universe as matter expanding into nothing that is something,<br> wearing stripes with plaid comes easy.”</i>    

        </div>
    </div>



    <nav>
          <a href="#" class="hide-desktop">
             <img src="obrazky/gold_menu_icon.png" alt="toggle menu" class="menu" id="menu">
          </a>
          <ul class="show-desktop hide-mobile">
              <li><a href="#xxx">Domů</a></li>
              <li><a href="#yyy">O mně</a></li>
              <li><a href="#zzz">Kontakt</a></li>
          </ul> 

     </nav>

    <div class="stars">
        <div class="stars_content" id="xxx">
            <div class="container">
                <h2>AAAAAAAA AAA AAAAA</h2><hr>
                <p>sss</p>
            </div>
        </div>
    </div>

    <div class="stars">
        <div class="stars_content" id="yyy">
            <div class="container">
                <h2>BBBBBBB BBB BBBBBB</h2><hr>
                <p>sss</p>
            </div>
        </div>
    </div>

    <div class="stars">
        <div class="stars_content" id="zzz">
            <div class="container">
                <h2>CCCC CCC CCCCCC</h2><hr>
                <p>sss</p>
            </div>
        </div>
    </div>

    <footer class="footer">
    </footer>





    <script type="text/javascript">

/* 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 <= -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(/^\//, '') 
      && 
      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
          };
        });
      }
    }
  });



    </script>

</body>
</html>

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

1 個解決方案

解決方案1
 0 已采納  2019-10-02 21:00:25

1）包裝你的nav ：


    <div class="nav-wrapper">
      <nav>
        <a href="#" class="hide-desktop">
          <img src="obrazky/gold_menu_icon.png" alt="toggle menu" class="menu" id="menu">
        </a>
        <ul class="show-desktop hide-mobile">
            <li><a href="#xxx">Domů</a></li>
            <li><a href="#yyy">O mně</a></li>
            <li><a href="#zzz">Kontakt</a></li>
        </ul> 
      </nav>
    </div>

2）使用 position fixed而不是sticky ：

nav.class_nav {
  clip-path: none;
  z-index: 4;
  height: 100px;
  top: 0;
  position: fixed;
  width: 100%;
}

3）當導航固定時將高度設置為導航包裝：

if (position <= -705)
{   
  console.log(position = $('a').offset().top - $(window).scrollTop());
  if( !$("nav").hasClass( 'class_nav' ) ){
    $(".nav-wrapper").css( 'height', $("nav").outerHeight( true ) );
    $("nav").addClass("class_nav");
  }
}
else
{
  console.log(position = $('nav').offset().top - $(window).scrollTop());
  $(".nav-wrapper").css( 'height', 'auto' );
  $("nav").removeClass("class_nav");
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在滾動固定標題/導航欄上制作多個貼在頁面頂部的固定標題/導航欄？ 圖像后如何使導航欄粘貼在頁面頂部？ 導航欄展開時，如何使它滾動並固定到頁面頂部？ 如何使導航欄平滑滾動到頁面頂部，請單擊 如何使div貼在滾動頁面的頂部附近？ 嘗試讓我的導航欄停留在頁面頂部並滾動 如何在點擊時讓 div 滾動到頁面頂部？ 如何使導航欄縮小？ 單擊按鈕時，如何使導航欄滾動頁面？ 在滾動時將元素粘貼到頁面頂部然后將其移除？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM