我希望封面标题在我滚动时向上移动，但目前我无法使<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.indexcity {
z-index: 99999;
}
body {
background-color: lightblue;
}
@media screen and (max-width: 767px) {
#logo{
text-align: right;
float: right;
margin-right: 40%;
}
#opt_menu{
float:left;
}
.navbar-collapse{
background-color:#847e6e;
position: fixed;
top: 0;
transition: all .25s ease-out;
height: 100%;
width: 70%;
right: 800px;
opacity: 50%;
box-shadow:0 0 25px #08090a;
}
.navbar-fixed-top .navbar-nav>li>a {
color: #000;
}
.right {
right: 0 !important;
left: 0 !important;}
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
max-height: 100%;
}
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class= "container">
<a href = "#" class= "navbar-brand" id="logo">Test</a>
<button class = "navbar-toggle" id="opt_menu">
<span class="sr-only">Toggle navigation</span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
</button>
<div class = "navbar-collapse" >
<ul class ="nav navbar-nav navbar-right">
<li> <a href="#">Link0</a></li>
<li class ="dropdown">
<a href="#" class ="dropdown-toggle" data-toggle ="dropdown">Link1<b class ="caret"></b></a>
<ul class = dropdown-menu>
<li><a href="#">Link1</a> </li>
<li><a href="#">Link2</a> </li>
<li><a href="#">Link3</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script>
/*
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}*/
jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
$('body').toggleClass('changecolor');
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
工作。使用vanilla JavaScript。
这是我的代码：
scrollTopwindow.onload = function(){
var coverTitle = document.querySelectorAll('.cover-title');
window.addEventListener("scroll", function(){
console.log(coverTitle.item(0).scrollTop);
});
};.cover{
width: 100%;
height: 500px;
background-image: url('img/cover.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
}
.cover h1{
color: white;
position: absolute;
font-family: serif;
top: 70%;
left: 10%;
}
答案 0 :(得分：1)
根据文件
Element.scrollTop属性获取或设置像素数 元素的内容向上滚动。元素的scrollTop 是一种关于元素顶部的距离测量形式 最顶层的可见内容。当元素内容不生成时 垂直滚动条，然后其scrollTop值默认为0.
Doc：https://developer.mozilla.org/en/docs/Web/API/Element/scrollTop
第一点说明了这一点。
如果元素无法滚动（例如，它没有溢出或者如果没有 element具有“不可滚动”的属性，scrollTop设置为0。
您的元素没有任何溢出属性，因此它自然地将scrollTop设置为0。