1. Zuhause
  2. Frage und Antwort
  3. Auf Scroll Sticky Header

Auf Scroll Sticky Header

2017-12-25 8 views
1

Ich habe versucht, einige Tutorials auf Sticky Header folgen, aber ich kann sie nicht richtig funktionieren.Auf Scroll Sticky Header

Meine onscroll 'festen' Header springt und von dem, was ich verstehe, weil ich habe: (scroll> = 200). Wie bekomme ich es, um ohne zu springen glatt zu rollen.

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>

Quelle

2017-12-25 user3076139

Antwort

2

Ich denke, das ist das, was Sie suchen. Ich habe body nur hinzugefügt, um zum Beispiel eine Scrollhöhe zu geben. Lass mich wissen wie du gehst?

$(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>

Quelle

2017-12-25 04:48:46 Darren

3

Um Sprünge zu vermeiden, können Sie @keyframes

Die @keyframes CSS at-Regel steuert die Zwischenschritte in einer CSS-Animationssequenz verwenden, indem Sie Stile für Keyframes definieren (oder Wegpunkte) entlang der Animationssequenz. Dies gibt mehr Kontrolle über die Zwischenschritte der Animationssequenz als Übergänge.

mehr @keyframes mozilla developer documentation

Lesen Sie diese zu Ihrem CSS hinzufügen:

@keyframes smoothScroll { 
    0% { 
     transform: translateY(-100px); 
    } 
    100% { 
     transform: translateY(0px); 
    } 
}

mehr awesome Tricks lesen Sie hier: Keyframe Animation Syntax

ich Ihre vorhandenen CSS geändert und erstellt eine Fiddle, um Ihnen eine Idee zu geben ... check out the fiddle

$(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>

Quelle

2017-12-25 04:50:41 Rushikumar

Verwandte Themen

 Verwandte Themen