在滾動粘頁眉上
[英]On Scroll Sticky Header
問題描述
我嘗試按照粘性標頭上的一些教程進行操作，但無法使其正常工作。
我的onscroll'fixed'標頭跳了起來，而據我了解，因為我有：（scroll> = 200）。 我如何使其平滑滾動而不跳躍。
jQuery的
jQuery(window).scroll(function(){
var sticky = jQuery('.custom-sticky'),
scroll = jQuery(window).scrollTop();
if (scroll >= 200) sticky.addClass('testu');
else sticky.removeClass('testu');
});
的CSS
.mkdf-wrapper {
position: relative;
z-index: 1000;
left: 0;
}
.mkdf-wrapper-inner {
width: 100%;
overflow: hidden;
}
.custom-sticky{
transition: all 0.5s ease;
}
.testu {
position: fixed;
margin-top:-20px;
left: 0px;
z-index: 999;
width: 100%;
}
/* shrinking logo, adjusting placement */
.testu .logo.row1{
margin:25px 0 -26px 0;
}
.testu .logo.row1 img{
max-width:80%;
}
/* removing header links */
.testu .toplinks.row2{
display:none;
}
/* phone number */
.testu .row1a h6{
margin-top:0.5em;
}
的HTML
<div class="mkdf-wrapper">
<div class="mkdf-wrapper-inner">
<div class="custom-sticky"> <?php //include 'customheader.php';
dynamic_sidebar('sidebar-top');?>
<?php if (!voyage_mikado_is_ajax_request()) voyage_mikado_get_header(); ?>
</div>
2 個解決方案
解決方案1
3 2017-12-25 04:50:41
為了避免跳轉，可以使用@keyframes
@keyframesCSS規則通過定義動畫序列中關鍵幀（或航點）的樣式來控制CSS動畫序列中的中間步驟。 與過渡相比，這可以更好地控制動畫序列的中間步驟。
將此添加到您的CSS：
@keyframes smoothScroll {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0px);
}
}
您可以在此處閱讀更多很棒的技巧： 關鍵幀動畫語法
我已經修改了您現有的CSS並創建了一個小提琴，給您一個想法... 查看小提琴
$(document).ready(function() { jQuery(window).scroll(function(){ var sticky = jQuery('.custom-sticky'), scroll = jQuery(window).scrollTop(); if (scroll >= 65) sticky.addClass('testu'); else sticky.removeClass('testu'); }); });
.mkdf-wrapper { position: relative; z-index: 1000; left: 0; } .mkdf-wrapper-inner { width: 100%; overflow: hidden; } .custom-sticky{ transition: all 0.5s ease; background-color: white; padding: 20px; } .testu { position: fixed; margin-top:0px; left: 0px; z-index: 999; width: 100%; animation: smoothScroll 1s forwards; } /* shrinking logo, adjusting placement */ .testu .logo.row1{ margin:25px 0 -26px 0; } .testu .logo.row1 img{ max-width:80%; } /* removing header links */ .testu .toplinks.row2{ display:none; } /* phone number */ .testu .row1a h6{ margin-top:0.5em; } @keyframes smoothScroll { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } }
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <body> <div class="mkdf-wrapper"> <div class="mkdf-wrapper-inner"> <div class="custom-sticky"> My awesome top navigation </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque bibendum leo vitae placerat dapibus. Fusce vel varius felis. Quisque quis ex quis urna tincidunt fringilla. Nam accumsan justo feugiat sem ornare sodales. Cras nec luctus felis, aliquam egestas lorem. Phasellus non augue sollicitudin, faucibus erat vel, congue ex. Curabitur mollis eleifend lectus, sed cursus leo ullamcorper ut. Proin id dolor id lectus pulvinar vestibulum. Donec aliquam sem at pharetra volutpat. Sed in sem sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel pellentesque lorem. Nam quis leo massa. Pellentesque tincidunt quis nisl id convallis. Pellentesque sollicitudin risus ut ex finibus, a laoreet libero tempor. Nam nec scelerisque sapien. Nam tincidunt, ex sed suscipit lobortis, erat nisl semper velit, tincidunt malesuada libero tellus quis sem. Fusce nec sem at nibh dapibus venenatis id ac mi. Nullam quis nunc tincidunt, fringilla tellus a, semper felis. Phasellus tincidunt elit purus, sed pretium metus suscipit ut. Suspendisse varius vulputate urna, id gravida enim vulputate eu. Sed sit amet ornare augue. Donec mollis et purus et faucibus. In ullamcorper, ante ac sagittis semper, quam quam accumsan leo, quis condimentum augue ante vel enim. Maecenas id cursus quam, a suscipit mi. Fusce nec tortor convallis, congue nisi vel, rutrum est. Sed id scelerisque dolor. Sed semper eget nibh vitae dictum. Etiam dignissim dolor id urna pharetra pellentesque. Fusce ornare, felis viverra laoreet ultricies, quam elit faucibus odio, in convallis sapien lacus id sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida, dui et congue malesuada, lectus elit blandit sapien, id molestie erat justo sed mauris. Fusce dictum hendrerit nisi sit amet euismod. Aenean sem sapien, mattis eu feugiat a, sodales ut dui. Duis aliquam arcu pharetra neque tristique, nec feugiat tortor fringilla. Vestibulum pulvinar felis id ipsum elementum cursus. Pellentesque ut purus tincidunt, fringilla metus in, aliquet sapien. Duis quis fermentum nulla. Duis aliquet luctus justo a volutpat. In in urna rutrum, fermentum sem pretium, sodales quam. Pellentesque porta massa sit amet odio venenatis gravida. Quisque ultricies mi vel venenatis auctor. Duis dignissim nunc ut scelerisque bibendum. Quisque ut lorem dolor. Quisque blandit elementum tortor vel suscipit. Suspendisse porttitor orci a purus iaculis, ut viverra massa tempor. Morbi sapien eros, suscipit eu venenatis eget, auctor in sapien. Aenean purus turpis, tempor ac imperdiet in, vehicula ac urna. Aliquam id odio at velit aliquam egestas. Quisque turpis sem, vestibulum et consequat in, efficitur vitae mi. Nulla dui mauris, suscipit consectetur molestie sit amet, tristique vitae lacus. Ut risus metus, sodales a congue sed, varius sed velit. Praesent eleifend non neque eu vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum lobortis neque sit amet rhoncus malesuada. Vivamus sem ex, feugiat ac lacinia quis, interdum in libero. Proin eget elementum nulla. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> test test test </div> </div> </body>
解決方案2
2 2017-12-25 04:48:46
我認為這就是您想要的。 我添加了body只是為了舉例說明滾動高度。 讓我知道你怎樣去？
$(document).ready(function() { var $header = $(".custom-sticky"), $clone = $header.before($header.clone().addClass("testu")); $(window).on("scroll", function() { var fromTop = $(window).scrollTop(); $("body").toggleClass("down", (fromTop > 200)); }); });
body.down div.testu { top: 0; } .custom-sticky { position: relative; width: 100%; background: #eee; padding: 20px; } .custom-sticky.testu { position: fixed; top: -65px; left: 8px; margin-top: 8px; z-index: 999; transition: 0.2s top cubic-bezier(.3, .73, .3, .74); } body { height: 1000px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="mkdf-wrapper"> <div class="mkdf-wrapper-inner"> <div class="custom-sticky">custom-sticky</div> </div> </div> </body>
滾動滾動頭
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.