在Scroll Sticky Header上

问题描述 投票：1回答：2

我已经尝试过关于粘性标题的一些教程，但我无法让它们正常工作。

我的onscroll'固定'标题跳转，从我理解它，因为我有:(滚动> = 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>
jquery wordpress sticky
2个回答
3
投票

为了避免跳跃，你可以使用@keyframes

@keyframes CSS at-rule通过定义动画序列中关键帧（或路标点）的样式来控制CSS动画序列中的中间步骤。与转换相比，这可以更好地控制动画序列的中间步骤。

阅读更多@keyframes mozilla developer documentation

将其添加到您的CSS：

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

更多精彩的技巧可以在这里阅读：Keyframe Animation Syntax

我修改了你现有的CSS并创建了一个小提琴，给你一个想法... 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>
2
投票

我想这就是你要找的东西。我添加了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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.