麻烦褪色滚动元素

时间:2013-03-08 19:03:54

标签: jquery html scroll visibility fade

我有一个固定位置的文章元素,我想在滚动页面时淡出。我在Javascript方面不是很有经验,但经过一些研究后我把这个脚本放在一起;

<script type="text/javascript">

        //when the DOM has loaded
        $(document).ready(function() {

            //attach some code to the scroll event of the window object
            //or whatever element(s) see http://docs.jquery.com/Selectors
            $(window).scroll(function () {
                  var height = $('body').height();
                  var scrollTop = $('body').scrollTop();
                  var opacity = 1;

                  // do some math here, by placing some condition or formula
                  if(scrollTop > 400) {
                      opacity = 0.5;
                  }

                  //set the opacity of div id="someDivId"
                  $('#instructions').css('0', opacity);
            });
        });
    </script>

这似乎不起作用,并且在搜索时该元素仍然完全不透明(网站在这里http://edharrisondesign.com/pocketpictograms/)。

任何想法为什么?提前谢谢。

1 个答案:

答案 0 :(得分:1)

如果您使用var height = $('body').height();,则可能需要指定正文的高度。但是,进行以下更改,它应该可以工作:

$('#instructions').css('opacity', opacity);

样本: http://jsfiddle.net/SLGdE/20/