On Scroll Sticky Header

끈적 헤더에 대한 몇 가지 자습서를 시도했지만 정상적으로 작동하지 않습니다.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>

출처

2017-12-25 user3076139

나는 이것이 당신이 찾고있는 것을 생각합니다. 예를 들어 스크롤 높이를 지정하기 위해 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>

출처

2017-12-25 04:48:46 Darren

, 당신은-통치 @keyframes CSS는 (키 프레임의 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어 @keyframes

사용할 수 있습니다 또는 웨이 포인트)를 생성 할 수 있습니다. 이렇게하면 전환보다 애니메이션 시퀀스의 중간 단계를 더 잘 제어 할 수 있습니다. 나는 기존의 CSS를 수정하고 바이올린을 만든 Keyframe Animation Syntax

:

더 @keyframes mozilla developer documentation

당신의 CSS이 추가 읽기 :

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

더 멋진 트릭은 여기에서 읽을 수 있습니다 당신에게 아이디어를 줄 ... 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>

출처

2017-12-25 04:50:41 Rushikumar

답변

관련 문제