基于scrollTop改变图像的位置

Question

我有一个回到顶部的图像，当用户滚动超过280时弹出。问题是当你到达底部时图像是通过页脚中的链接。所以我想改变图像的位置，一旦用户从页面底部开始大约90px - 我想要“底部”：'35px'为95.页面高度始终在改变fyi。代码我有：

function update() { 
    if ($(window).scrollTop() > 280) { 
     $('#btt').animate({ 
      "bottom": '35px' 
      }, 300); 
    } 

    else { 
     $('#btt').animate({ 
      "bottom": '-80px' 
     }, 300); 
     } 
    } 
setInterval(update, 500); 

Answer 1

只有当页面被滚动而不是仅仅检查每1/2秒时检查滚动位置可能会更好。

我已经把我的想法一个工作演示你想在这里：http://jsfiddle.net/swpqpv4r/5/

基本上，我们需要看看窗口底部的滚动位置，因为我们不是滚动的顶部使用document.body.scrollTop + $(win).height()。通常我们可能会担心如果窗口被调整大小会发生什么，但是我们每次都在scroll事件内部计算这个值，所以如果窗口更改大小，它不应该成为问题。

接下来我们需要知道页脚的顶部何时在窗口底部滚动。我们可以使用$("#footer").position().top;来查看它的顶部位置。

希望代码有足够的评论来帮助解释它。如果您有任何问题，请告诉我。

HTML

<header>Top</header> 
<br><br><br> <!-- Lots of these for testing --> 
<footer id="footer">Bottom</footer> 
<a id="btt" href="javascript:{};">Back to top</a> 

的JavaScript

$(function(){ 
    //select once and re-use later 
    var $win = $(window); 
    var $btt = $("#btt"); 
    var $foot = $("#footer"); 
    var bttDisplay = 500; 
    var footerHeight = $foot.outerHeight(); 
    var footerTop = $foot.position().top; 

    function updateScroll() { 
     var scrollBottom = document.body.scrollTop + $win.height(); 

     if (scrollBottom >= bttDisplay && scrollBottom <= footerTop) { 
      //show it by setting the bottom position to 0 
      animateBtt(0); 
     }else if (scrollBottom >= footerTop) { 
      //move it up above the footer's top position 
      animateBtt(footerHeight); 
     }else { 
      //hide it by setting the bottom position to the negative value of it's height 
      animateBtt($btt.height() * -1); 
     } 
    } 

    function animateBtt(pos){ 
     $btt.animate({ 
      "bottom": pos 
     }, 300); 
    } 

    //run initially 
    updateScroll(); 

    //Create a var to hold the timer 
    var scrollTimer = null; 
    $win.on("scroll",function(ev){ 
     //when scrolling, clear the timer 
     clearTimeout(scrollTimer); 
     //Now set the timer to run a function after a small delay. 
     //This prevents the update from happening too many times when you scroll 
     scrollTimer = setTimeout(updateScroll, 50); 
    }); 

    //click to scroll back up 
    $btt.on("click",function(){ 
     $('html, body').animate({scrollTop:0},300); 
    }) 

}); 

CSS

html,body{ 
    margin:0; 
    padding:0; 
} 
header, footer{ 
    background: #CCC; 
    padding: 10px; 
} 
#btt{ 
    position:fixed; 
    height: 30px; 
    width: 100px; 
    text-align:center; 
    bottom: -30px; 
    right:0; 
    background: #F00; 
    color: #FFF; 
    z-index: 1000; 
}