jQuery的的CSS移動事業部向上向下進入另一個事業部上滾動

您好我想滾動時的劃分是可行的或視口各部門內部的小按鈕。我試着用scrollTop()但其滾動所有的divjQuery的的CSS移動事業部向上向下進入另一個事業部上滾動

我想創建他們正在使用的下載按鈕

https://www.template.net/web-templates/bootstrap/bootstrap-gallery-template/

這裏類似的效果是我的代碼

$(document).ready(function() { 
    var el = $('.spicbo'); 
var elpos_original = el.offset().top; 
$(window).scroll(function(){ 
    var elpos = el.offset().top; 
    var windowpos = $(window).scrollTop(); 
    var finaldestination = windowpos; 
    if(windowpos<elpos_original) { 
     finaldestination = elpos_original; 
     el.stop().css({'top':5}); 
    } else { 
     el.stop().animate({'top':finaldestination-elpos_original+10},400); 
    } 
});

預先感謝您

來源

2016-02-19 Allex

根據我的理解，你希望能夠當你將鼠標懸停在另一個元素移動按鈕向上/向下？ –

我已經基於您在中提供的原型網頁中看到的內容創建了一個工作示例。在本例中，當鼠標指針在container div內移動時，button平滑移動指針。

HTML

<div class="container"> 
    <button type="submit">download</button> 
</div>

CSS

.container { 
    position: relative; 
    margin-top: 20px; 
    width: 300px; 
    height: 100px; 
    background: #ccc; 
} 

button { 
    position: absolute; 
    opacity: 0; 
    top: 0; 
    right: 0; 
    margin: 5px; 
    transition: opacity 0.1s ease-in-out; 
}

$(document).ready(function() { 

    var currentMousePos = { x: -1, y: -1 }; 

    $(".container").mousemove(function(event) { 
    if ((event.pageY + $("button").outerHeight(true) - 20) < $(".container").height()) { 
     currentMousePos.y = event.pageY - 20; 
     } 

     $("button").css({opacity:1}); 
     $("button").stop(true,true).animate({ 
      top: currentMousePos.y 
     }, 200) 
    }); 

    $(".container").mouseleave(function() { 
    $("button").css({opacity:0}); 
    });

}）;

在mousemove事件中，我們追蹤的鼠標指針時，它是container div中。如果鼠標指針向下的股利，以便它按下按鈕出了格的，我們不更新currentMousePos.y使button將永遠留container內。然後我們將opacity更改爲1並使用animate來相應地移動按鈕。在mouseleave事件中，我們將button返回到隱形狀態。

來源

2016-02-19 23:22:29

jQuery的的CSS移動事業部向上向下進入另一個事業部上滾動

回答

相關問題