Question

我正在尝试将标题固定在滚动上。

我编写了这段代码，但无法正常工作，如果向下滚动，您会看到它跳转。这是website。谢谢。

  <script >
 $(document).ready(function($) {
  jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 40) {
        jQuery('#masthead').addClass('small-logo');
    } else {
        jQuery('#masthead').removeClass('small-logo');
    }
});
 jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 40) {
        jQuery('#site-navigation').addClass('fixed-menu');
    } else {
        jQuery('#site-navigation').removeClass('fixed-menu');
    }
   });
});

 </script>


   .small-logo{
     position:fixed;
     width: 100%;
     z-index: 999;
 }
  .fixed-menu{
     position:fixed;
     margin-top: 0;
     top:160px;
   }

Answer 1

这是您的代码的正常行为。用动画编写好的固定标题并不容易。我使用这个插件，它对我很有用http://leafo.net/sticky-kit/

准备好文件：

$('.your-sticky-item-class').stick_in_parent();

查看其网站上的所有说明。

Answer 2

正如我和@ovokuro在评论中提到的那样，因为你把它从文件流中拿走了。请参阅codepen here上的简单示例。

要使徽标更小，请使用完全相同的主体...在所需的触发点添加一个类，使css使元素更小。您可以添加一个简单的css过渡，使其看起来“更漂亮”

希望这有帮助

$(document).ready(function() {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 300) {
      $('.nav-fixed-container').addClass('fixed');
    } else {
      $('.nav-fixed-container').removeClass('fixed');
    }
  });
});

body {
  margin:0;
}
/*add the fixed height here.. we could also retrieve this using jquery*/
.nav-container {
  height:130px;
  width:100%;
  margin:0;
  white-space: nowrap;
  font-size: 0;
}
.masthead {
  width:100%;
  background:red;
  margin:0;
  font-size:18px;
}
.logo {
  width:90px;
  height:90px;
  background:purple;
  font-size:18px;
}

.body {
  width:100%;
  height:1800px;
  background:green;
  padding:0;
  font-size:18px;
}
li {
  float:left;
  list-style:none;
 margin-right:20px;
  font-size:18px;
}
.nav {
  background:blue;
  width:100%;
  height:40px;
}
.nav-fixed-container {
  width:100%;
  transition: 0.5s ease-In-Out;
}
.fixed {
  position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-container">
  <div class="nav-fixed-container">
    <div class="masthead">
      <div class="logo">logo</div>
    </div>
    <div class="nav">
      <ul>
        <li>menu link 1</li>
        <li>menu link 2</li>
        <li>menu link 3</li>
        <li>menu link 4</li>
      </ul>
    </div>
  </div>
</div>

<div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fringilla diam, at facilisis eros. Nulla molestie urna neque, ac tristique odio ullamcorper et. Nulla nec elit non velit euismod consectetur. Fusce rhoncus pharetra imperdiet. Suspendisse quis felis maximus, porttitor ante at, egestas augue. Pellentesque est augue, venenatis in felis vitae, venenatis malesuada nunc. In eget fermentum neque. Sed vitae dapibus diam. Fusce vehicula augue eu ornare euismod. Etiam rutrum eu turpis in ullamcorper. Mauris facilisis faucibus rutrum
  <br><br><br>. Sed ac justo et purus luctus cursus. Nulla non sapien molestie ipsum bibendum mollis.

Integer convallis sodales dui, in cursus tellus vestibulum sit amet. Integer id enim laoreet, vehicula metus et, condimentum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id commodo dolor, vel commod<br><br><br><br>o odio. Nam ipsum nisl, volutpat ac sapien aliquet, suscipit consectetur nisi. Mauris scelerisque risus dui, sed viverra libero rhoncus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicul<br><br><br>us mus. Sed blandit, ante in dapibus posuere, urna leo efficitur ipsum, in ornare ligula nunc et eros.
<br><br>
Ut bibendum libero dolor, quis tempor est dapibus nec. Etiam dapibus justo ac risus mattis, nec convallis augue tincidunt. Duis varius id ligula sed scelerisque. Nam at elementum mauris. Nullam<br><br><br> mattis, mauris sit amet dapibus lobortis, diam nibh gravida neque, nec rutrum nunc mauris sed elit. Nulla et est consectetur, dapibus felis at, fermentum ante. Sed orci ipsum, luctus ac imperdiet vitae, ornare sit amet leo. Quisque sit amet dolor neque. Aenean ac lorem quam. Curabitur massa est, rhoncus ac iaculis sit amet, maximus id ante. Aene<br><br>an aliquam tincidunt nunc sit amet hendrerit. Nulla consectetur velit vitae dignissim dictum. Vivamus gravida pharetra sem in vestibulum. Nulla </div>

Wordpress标题固定在滚动上跳转

2 个答案: