jquery - 视差网站 - Img 在我滚动之前不会出现

标签 jquery css image parallax

在我的 site我在第一页上有一个 Logo ,但在我开始滚动之前它不可见?如何让它立即可见?

这是我的html

<div id="introwrapper">
    <div id="intro">
    <!--    <div id="introbaggrundforan"></div>-->
    <div id="introbaggrundbagved"></div>
    <a name="section1" class="section1">SECTION 1</a>
    </div> <!--#intro-->
<div id="logo"></div>

这是我的CSS:

#introwrapper {
height: 900px;
position: relative;
overflow: hidden;   
background: transparent url('images/introbagved.png') no-repeat center;
}


#intro{
background: url('images/introforan.png') no-repeat center;
height: 900px;
width: 1440px;
margin: 0;
position: relative;
z-index: 3;
}

#logo{
background: transparent url('images/logo.png') no-repeat center;
width: 400px;
height: 400px;
position: absolute;
margin-left: 520px;
margin-top: 160px;
z-index: 2;
}

这是我的 Jquery:

$(document).ready(function(){
            $(window).bind('scroll',function(e){
                parallaxScroll();
            });


            function parallaxScroll(){
                var scrolledY = $(window).scrollTop();
                $('#logo').css('top','+'+((scrolledY*.819))+'px');

最佳答案

我想你想做的是制作一个粘性 Logo ?

$doucment.ready

加载时触发一次。你的滚动事件应该是

$(window).scroll(function () { 
  var scrolledY = $(window).scrollTop();
  $('#logo').css('top','+'+((scrolledY*.819))+'px');
});

IE8试试

$("html").scrollTop(); 

此外,您的 HTML 缺少 DIV 标记

<div id="introwrapper">
    <div id="intro">
        <!--    <div id="introbaggrundforan"></div>-->
        <div id="introbaggrundbagved"></div>
        <a name="section1" class="section1">SECTION 1</a>
    </div> <!--#intro-->
    <div id="logo"></div>
</div> <-- close this

此外,最好为空白标签保留一些数据。

关于jquery - 视差网站 - Img 在我滚动之前不会出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13942987/

相关文章:

javascript - 下面的结果会产生两个 HTTP 请求吗?

jquery - 追加后同位素项目重新定位问题

javascript - Bootstrap 表 td 压缩问题

html - 覆盖文本字段的 2 个设置

javascript - 如果 <img/> src url 为 404,则渲染 null

image - Sprite 和纹理的区别?

javascript - 两次更改文件后裁剪工具不工作?

iphone - 标签在 jqtouch 中不可点击

html - IE 7/8 CSS 菜单问题

android - 如何检测两个图像 "collide"?