Belirtilen yerde durur sayfanın altındaki sabit div

Question

Sayfanın altında iyi çalışan bir iş parçacığı var. Kullanıcı sayfanın altına indiğinde, sayfada bir yerde "dur" yapmanın basit bir yolu olup olmadığını merak ediyorum. Kullanıcı, sayfada belirli bir yere kaydırıp sayfaya yapıştırmak ve içeriğin geri kalanı gibi kaydırmak yerine, altta sabit kalmasını istiyorum. Baska öneri?

Answer 1

Jsfiddle'a bir şey koymaya çalıştım. Yazarken, diğerlerinin alternatiflerini paylaştıklarını görüyorum. Madenin herhangi bir şekilde yardımcı olması durumunda: http://jsfiddle.net/PnUmM/1/

Konumu CSS'de göreceli olarak ayarlıyorum, bilgiyi bir arada tutmak için belge yükünde nerede olduğunu hesaplayın ve ardından sabit olarak ayarlayın.

var sticky_offset; 
$(document).ready(function() { 

    var original_position_offset = $('#sticky_for_a_while').offset(); 
    sticky_offset = original_position_offset.top; 
    $('#sticky_for_a_while').css('position', 'fixed'); 


}); 

$(window).scroll(function() { 
    var sticky_height = $('#sticky_for_a_while').outerHeight(); 
    var where_scroll = $(window).scrollTop(); 
    var window_height = $(window).height(); 


    if((where_scroll + window_height) > sticky_offset) { 
     $('#sticky_for_a_while').css('position', 'relative'); 
    } 

    if((where_scroll + window_height) < (sticky_offset + sticky_height)) { 
     $('#sticky_for_a_while').css('position', 'fixed'); 
    } 

}); 

Answer 2

Aksini yapan bir eklenti var - bu web sayfasının akışında ve kullanıcı bu sayfayı geçtiğinde, görüntüye sabitleniyor. Aslında ne yaparsa elemanın css sınıfını uygular, böylece onu olduğu gibi kullanabilmelisiniz.

Burada eklenti bulabilirsiniz

: css ile

<div id="sometimesFixed">content</div> 

: https://github.com/hanssonlarsson/jquery-fixedscroll

O zaman web sayfanızın akışında sizin elemanı var öneririm

#sometimesFixed { 
    position: fixed; 
    bottom: 0; 
} 
#sometimesFixed.scroll { 
    position: static; 
} 

Ve eklentiyi şu şekilde uygulayın:

$('#sometimesFixed').fixedscroll({className: 'scroll'}); 

Ayrıca jQuery-waypoints olarak adlandırılan çok daha genel bir eklenti de vardır. Buradaki fikir, herhangi bir kodu "yol işaretleri" ne bağlamak, kullanıcı web sayfalarında ilerlediğinde, bazı kodlar yürütüldüğünde, web sayfasında işaret eder.

https://github.com/imakewebthings/jquery-waypoints

Muhtemelen daha optimize ve benim eklenti daha iyi bir uyum, ymmv oluyor!

Answer 3

Bunu sizin için yaptım: http://jsfiddle.net/XCYFG/1/.

$(document).ready(function() { 
    window._div1 = $('#div1'); //selector is expensive 
    window._window = $(window); 
    $(window).scroll(function(e) { 
     _div1.css("top", 
        Math.min(_window.height(), 
          window.scrollY + 100) 
        + _window.height() - _div1.height() - 110); 
    }).scroll(); 
});