Question

我想在我的html网站上制作粘性菜单栏。

但不能让它变得粘稠。

html标记

<header class="header__container" id="myHeader">
     /*navbar html part is here*/
</header>

css part

.sticky 
{
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content 
{
    padding-top: 102px;
}

js代码

<script type="text/javascript">
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky)
  {
    header.classList.add("sticky");
  }
  else 
  {
    header.classList.remove("sticky");
  }
}

问题在哪里找不到

Answer 1

＆＃13;

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky)
  {
    header.classList.add("sticky");
  }
  else 
  {
    header.classList.remove("sticky");
  }
}

＆＃13;

body {
  height: 9000px;
}

.sticky 
{
    position: fixed;
    top: 0;
    width: 100%;
    background: red;
}

.sticky + .content 
{
    padding-top: 102px;
}

＆＃13;

<header class="header__container" id="myHeader">
     <nav class="content">
       <ul>
         <li>1</li>
         <li>2</li>
       </ul>
     </nav>
</header>

＆＃13;

解释你想要达到的目标？

Answer 2

＆＃13;

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

＆＃13;

body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

＆＃13;

Answer 3

选中此代码段，根据我的脚本滚动header后，fixed将获得100px。它会添加课程scrolled以制作header fixed

let $window = $(window),
        $document = $("document"),
        $body = $("body");
        
/*
     * Header Fix on Scroll
     */

    let fixHeader = ($stickyEl, $scrollToPosition) => {

        if ($stickyEl.length > 0) {

            let scrollPostion = "";

            $window.scroll(() => {

                scrollPostion = $window.scrollTop();

                scrollPostion > $scrollToPosition ? $stickyEl.addClass("scrolled") : $stickyEl.removeClass("scrolled");
            });
        }
    };

    // Call fixed header function
    fixHeader($(".header__container"), 100);

.scrolled 
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

body {
  min-height: 600px; /* Just to check sticky header */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="header__container" id="myHeader">
     /*navbar html part is here*/
</header>

Answer 4

将窗口偏移更改为值应设置页面滚动位置。我只是从你的JS改变了window.pageYOffset >= 100。

＆＃13;

window.onscroll = function() {
  myFunction()
};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= 100) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

＆＃13;

body {
  height: 2000px;
  margin: 0;
  font-family: sans-serif;
}

header {
  background: #333;
  padding: 15px 10px;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky {
  padding: 5px 10px;
}

.sticky+.content {
  padding-top: 102px;
}

＆＃13;

<header class="container" id="myHeader">
  /*navbar html part is here*/
</header>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Sed ut perspiciatis unde omnis iste natus error
  sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
  consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
  voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
  illum qui dolorem eum fugiat quo voluptas nulla pariatur
</div>

＆＃13;

如何使用javascript在html中制作粘性菜单栏

4 个答案: