Question

示例：

Mjnichols.net

当您向下滚动时，会出现一个白色标题，然后在向上滚动时消失。我可以这样做吗？

Answer 1

$(window).scroll(function() {    
   var scroll = $(window).scrollTop();

   if (scroll >= 50) {
       $(".clearHeader").addClass("fix-navbar");
   } else {
       $(".clearHeader").removeClass("fix-navbar");
   }
});

然后根据fix-navbar类设置标题样式。使用position: fixed;使其成为＆＃34;粘性＆＃34;。如果滚动超过某个点，则会出现fix-navbar类（更改50以更改此点）。

您还需要jQuery才能使上述代码正常工作。

Answer 2

据我所知，最好的方法是使用jQuery，CSS3过渡也可以用来做出流畅的效果。可以修改效果以最适合小时条件。

//Detect if document has scrolled
$(window).scroll(function (e) {
    var scrollAmount = 100;
    //Check if user has scrolled enough
    if ($(window).scrollTop() > scrollAmount) {
        //Add white class
        $("#header").addClass('header_white');
    } else if ($("#header").hasClass('header_white')) {
        //Remove white class
        $("#header").removeClass('header_white');
    }
});

body {
    background-color:red;
}
#header {
    height: 40px;
    font-size: 32px;
    text-align:center;
    background-color: transparent;
    transition: background-color 0.5s ease;
    position:fixed;
    top:0;
    width:100%;
}

.header_white {
    background-color: white !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
    Blah Blah
</div>
Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content

Answer 3

您需要使用JavaScript才能检测到用户向下滚动的时间。如果你只是需要这个功能而jQuery是有点矫枉过正，只是为了帮助你理解，请看这个演示：http://jsfiddle.net/sajadtorkamani/qaj6L1pk/

$(window).scroll(function() {

if ($(this).scrollTop()>50)
 {
    $('#header').fadeIn();
 }
else
 {
  $('#header').fadeOut();
 }

}）;

Answer 4

css：

   .fix-navbar{
    position: fixed;
    top: 0;
    left:0;
   }

我认为这是你需要的开始。希望它有所帮助

如何制作浮动标题？

4 个答案: