文章/答案/技术大牛

发布

社区首页 >问答首页 >关于Scroll Sticky Header

问关于Scroll Sticky Header
EN

Stack Overflow用户

提问于 2017-12-25 12:18:42

回答 2查看 92关注 0票数 1

我尝试了一些关于粘性标题的教程，但我不能让它们正常工作。

我的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

Stack Overflow用户

发布于 2017-12-25 12:50:41

为了避免跳转，您可以使用@keyframes

@keyframes CSS at规则通过定义动画序列中关键帧(或路点)的样式来控制CSS动画序列中的中间步骤。与过渡相比，这样可以更好地控制动画序列的中间步骤。

阅读更多 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>

票数 3

Stack Overflow用户

发布于 2017-12-25 12: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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47965661

复制

相似问题

问关于Scroll Sticky Header
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于Scroll Sticky HeaderEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于Scroll Sticky Header
EN