滚动标题更改

时间:2016-01-06 01:30:06

标签: javascript jquery html css

在我正在创建的网站上,我想在滚动时放置一个更改大小的标题。我已经做了两种理论上应该有效的方法。这个头文件是包含JS的更大文档的一部分,当我测试其他JS工作时,我不相信是一个主要的语法错误。此外,当我检查它时,我没有在控制台中看到任何错误。

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
  <header>
    <a href="index.html">
      <h1>MEH Web Design</h1>
    </a>
  </header>
我尝试做的另一种方法也不起作用:

$(function() {
    var header = $(".hlarge");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
    
        if (scroll >= 200) {
            header.removeClass('hlarge').addClass("hsmall");
        } else {
            header.removeClass("hsmall").addClass('hlarge');
        }
    });
});
.hlarge {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
.hsmall {
    height: 150px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
  
  <header class="hlarge">
  <a href="index.html">
   <h1>MEH Web Design</h1>
  </a>
  </header>
在第二个期间,JS甚至不会改变类

2 个答案:

答案 0 :(得分:1)

我不认为你的任何一个例子都是身体足够高,可以滚动发生。

&#13;
&#13;
from django.conf.urls import url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
]
&#13;
$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
&#13;
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}

body {
  min-height:1000px;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您的代码有效,但页面似乎太短而无法实际需要滚动,这是触发滚动事件所需的。即使触发了它,$ .scrollTop()也会返回视口上方页面部分的像素高度,因此您必须让页面至少比视口高100像素才能获得所需的效果。尝试向页面添加更多内容,或者在文档正文中设置大于视口的最小高度。

&#13;
&#13;
$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("header").css("height", "100px");
    else
        $("header").css("height", "45px");
});
&#13;
body{
  min-height: 1000px
}
header {
    height: 300px;
    background-color: #69D2E7;
    font-family: 'Raleway', sans-serif;
    z-index: 30;
    width: 100vw;
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6);
    position: fixed;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="index.html">
    <h1>MEH Web Design</h1>
  </a>
</header>
&#13;
&#13;
&#13;