在我正在创建的网站上,我想在滚动时放置一个更改大小的标题。我已经做了两种理论上应该有效的方法。这个头文件是包含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>
答案 0 :(得分:1)
我不认为你的任何一个例子都是身体足够高,可以滚动发生。
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;
答案 1 :(得分:1)
您的代码有效,但页面似乎太短而无法实际需要滚动,这是触发滚动事件所需的。即使触发了它,$ .scrollTop()也会返回视口上方页面部分的像素高度,因此您必须让页面至少比视口高100像素才能获得所需的效果。尝试向页面添加更多内容,或者在文档正文中设置大于视口的最小高度。
$(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;