个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用 Html Css & Js 在 Scroll 上制作了一个简单的视差图像和 Sticky header ，除了包含 h1 标签的 main div 之外一切正常(正如您在下面的代码中看到的那样)确实在导航菜单下崩溃了!
这是我的代码:您应该使用随机图像来获得更好的结果来测试代码。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Daygostar Homepage</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/bg.png" id="bg" alt="Background Image"/>
</div>
<div id="content">
<div id="navbar">
<div id="logo">
Daygostar
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<h1>Daygostar Web Design</h1>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS:
*{padding:0;margin:0;font-family:arial;}
#header{
height:91vh;
}
#header > img{
width:100%;
height:91vh;
position:fixed;
z-index:1;
}
#content{
height:100vh;
z-index:10;
background-color:#fff;
position:relative;
}
#content > #navbar{
position:absolute;
top:0;
width:100%;
height:80px;
background-color:#000;
}
#main{
height:100vh;
border:solid blue;
background-color:#fff;
position:relative;
padding-top:200px;
text-align:center;
font-size:25px;
z-index:10;
}
#main > *{
margin-top:30px;
}
#logo{
color:#fff;
font-size:35px;
float:left;
margin-top:15px;
margin-left:20px;
cursor:pointer;
}
#navbar > ul{
float:right;
width:700px;
list-style:none;
margin-top:25px;
}
#navbar > ul > li{
display:inline;
}
#navbar ul > li > a{
color:#fff;
font-size:20px;
text-decoration:none;
padding:10px 30px;
}
#navbar ul > li > a:hover{
text-decoration:underline;
}
Javascript:
var header = document.getElementById("header");
var navBar = document.getElementById("navbar");
var bg = document.getElementById("bg");
var navbarHeight = navBar.offsetHeight;
var headerHeight = header.offsetHeight;
header.style.height = screen.height-navbarHeight;
function initParallex(){
if (window.pageYOffset > headerHeight){
navBar.style.position = "fixed";
navBar.style.top = "0";
}else{
navBar.style.position = "absolute";
navBar.style.top = "0";
}
bg.style.top = -(window.pageYOffset/5)+"px";
}
window.addEventListener("scroll", initParallex);
如您所见，我已经添加了一个 if/else 语句来检查 headerHeight 是否小于 window.pageYOffset 或 script.js 中是否存在 文件，但是一旦网页到达主 div，折叠的导航栏就会隐藏!
如果你知道如何解决这个问题就太好了......
最佳答案
你可以在这里看看:
http://codepen.io/craigiswayne/pen/MyQVQB/
免责声明:
我确实使用了在此站点上找到的代码并添加了 jQuery。
HTML:
<div id="wrapper">
<div id="header">
<img src="http://orig13.deviantart.net/a8a7/f/2009/302/6/4/m_o_d_tile_background_by_viper_mod.png" id="bg" alt="Background Image" />
</div>
<div id="content">
<div id="navbar">
<div id="logo">
Daygostar
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<h1>Daygostar Web Design</h1>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
font-family: arial;
}
#header {
height: 91vh;
}
#header > img {
width: 100%;
height: 91vh;
position: fixed;
z-index: 1;
}
#content {
height: 100vh;
z-index: 10;
background-color: #fff;
position: relative;
}
#content > #navbar {
width: 100%;
min-height: 80px;
background-color: #000;
}
#main {
height: 100vh;
border: solid blue;
background-color: #fff;
position: relative;
padding-top: 200px;
text-align: center;
font-size: 25px;
z-index: 1;
}
#main > * {
margin-top: 30px;
}
#logo {
color: #fff;
font-size: 35px;
float: left;
margin-top: 15px;
margin-left: 20px;
cursor: pointer;
}
/*#navbar {
position: absolute;
top: 0;
}*/
#navbar.sticky {
position: fixed;
top:0;
z-index: 100;
}
#navbar > ul {
/* float: right; */
width: 700px;
list-style: none;
margin-top: 25px;
white-space: nowrap;
}
#navbar > ul > li {
display: inline;
float: none;
}
#navbar ul > li > a {
color: #fff;
font-size: 20px;
text-decoration: none;
padding: 10px 30px;
}
#navbar ul > li > a:hover {
text-decoration: underline;
}
JavaScript:
document.addEventListener("DOMContentLoaded",function(){
window.scrollTo(0,0);
header.style.height = screen.height-navbar.offsetHeight;
navbar.position_from_top = getAbsoluteOffsetFromBody(navbar).top;
window.addEventListener("scroll", initParallex);
},false);
function initParallex(){
bg.style.top = -(window.pageYOffset/5)+"px";
if(window.scrollY >= navbar.position_from_top)
$(navbar).addClass('sticky');
else
$(navbar).removeClass('sticky');
}
//see here: http://stackoverflow.com/a/34014786/1654250
getAbsoluteOffsetFromBody = function(el)
{ // finds the offset of el from the body or html element
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
}
return { top: parseInt(_y), left: parseInt(_x) };
}
关于javascript - Scroll 上的视差图像和粘性标题无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36558760/
25
4
0
我有一个脚本，允许在向下移动时快速滚动，但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport)，则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗？ 我专注于 android 浏览器。 最佳答案 不，滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切，但是，不幸的是，检查客户端浏览器我发现没有添加 cookie(平
清理并重建后，Eclipse Problems View 中出现错误标记，尽管一切都应该没问题。 如何消除这种不一致的错误？ 最佳答案 在这里，我回答自己接下来的步骤对我有用: 关闭 Eclipse
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
我希望我的 div 调用:如果我向下滚动，top 将粘在顶部，但现在它不会粘在顶部。 我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？ 我的网站:http://www.trevorpeters.co.uk/tpwebde
我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您
我的页脚设计为位于页面底部，即使其上方的 div 仅包含少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？ 提前致谢。 CSS: body { margin: 0;
我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。 在桌面网络浏览器上，它可以完美运行。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时，我可以让页脚粘在页面底部，但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推？一个很好的例子是
我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。 这正是我想要的外观/感觉
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件，我对此非常满意，但标题仅出现在一些像素之后，并不总是在顶部可见。有谁知道我如何修改代码以使其始
我目前正在创建一个网站，遇到了一个问题，每当我滚动我的粘性标题时，页面就会跳到下一个元素的底部，有人知道这是为什么吗？ 我已经尝试更改页面上基本上所有元素的填充，包括横幅、标题、文本本身，甚至 anc
我创建了一个简单的表格，顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码？ 谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
使用我当前的代码，当页面加载时，白色条形标题位于顶部。当你滚动时，它会消失，当你滚动到顶部时，白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之
我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。 我认为这很容易解决，但我太笨了... 我试图删除其他元素，因为我认为它们与标题
我的代码有点卡在粘性 header 上。 如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770)，
我是一名优秀的程序员,十分优秀！