Wordpress标题固定跳转滚动

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>