Javascript的滾動並沒有停止

嗨，大家我想要做簡單的滾動共享框小部件，但它不工作。它必須停止在特殊div（停止滾動）上，但它不停止並向下滾動，直到網頁頁腳。任何想法爲什麼？Javascript的滾動並沒有停止

var windw = this; 

$.fn.followTo = function (elem) { 
    var $this = this, 
     $window = $(windw), 
     $bumper = $(elem), 
     bumperPos = $bumper.offset().top, 
     thisHeight = $this.outerHeight(), 
     setPosition = function(){ 
      if ($window.scrollTop() <= (bumperPos - thisHeight)) { 
       $this.css({ 
        position: 'absolute', 
        top: (bumperPos - thisHeight) 
       }); 
      } else { 
       $this.css({ 
        position: 'fixed', 
        top: 0 
       }); 
      } 
     }; 
    $window.resize(function() 
    { 
     bumperPos = pos.offset().top; 
     thisHeight = $this.outerHeight(); 
     setPosition(); 
    }); 
    $window.scroll(setPosition); 
    setPosition(); 
}; 

$('#share_box').followTo('#stopscroll');

但它不停止在div #stopscroll上。

css文件看起來像這樣：

#share_box{ 
background: none repeat scroll 0% 0% #E1E1E1; 
position: fixed; 
width: 65px; 
padding: 15px; 
border-radius: 5px 0px 0px 5px; 
left: 1.89%;}

什麼想法？這裏的jsfiddle http://jsfiddle.net/NCY6x/

來源

2014-03-12 Karambyto04

您是否添加jQuery？（這不是在你的jsfiddle） –

那麼，在你的小提琴，你有沒有實際加載jQuery，再裝時，我得到一個錯誤說pos is not defined，我認爲指的是以下行：

bumperPos = pos.offset().top;

pos不會出現在任何地方設置

編輯：

還有一些其他的國際空間站用你的腳本。看到這裏的版本，我認爲你想要的作品http://jsfiddle.net/R5z6j/1/

我刪除了頂部的填充#stopscroll，因爲它不會將元素向下移動，因此頂部位置始終設置爲18px（請參閱控制檯輸出）

編輯2：

http://jsfiddle.net/R5z6j/5/ - 你可能會真正想要這樣一輪

來源

2014-03-12 16:03:16 Alex

我從這裏採取腳本：http://jsfiddle.net/Tgm6Y/1447/但它dosn't工作。 – Karambyto04

我認爲這張海報正在做與你所做的相反的事情。使它成爲「這是SCROOOOOOLLLL」框從頂部滾動頁面，直到你到達一定的位置，然後它會粘住。 –

馬修你是對的！這裏是例子：http://jsfiddle.net/R5z6j/2/。我想滾動停止某些div – Karambyto04

有很多語法和代碼變的失誤......

我已更新小提琴工作和更簡單的演示：http://jsfiddle.net/NCY6x/2/

$.fn.followTo = function (elem) { 
    var stopper = $(elem); 
    var box = this; 
    $(window).on("scroll resize", function(){ 
     var x_distance = (stopper.offset().top- box.outerHeight()); 
     if($(window).scrollTop() >= x_distance){ 
      box.css({"position": "absolute", "top": x_distance}); 
     } else { 
      box.css({"position": "fixed", "top": 0}); 
     } 
    }); 
}; 

$('#share_box').followTo('#stopscroll');

來源

2014-03-12 16:27:50 enapupe

Javascript的滾動並沒有停止

回答

相關問題