Dừng vị trí cố định ở chân

Question

Tôi đang tìm giải pháp cho vấn đề phổ biến là dừng đối tượng cố định ở chân trang.

Tôi về cơ bản có một hộp "chia sẻ" cố định ở góc dưới cùng bên trái của màn hình và tôi không muốn nó cuộn qua chân trang, vì vậy tôi cần nó dừng khoảng 10px phía trên chân trang.

Tôi đã xem xét các câu hỏi khác ở đây cũng như các câu hỏi khác. Bản demo gần nhất/đơn giản nhất tôi có thể tìm thấy là http://jsfiddle.net/bryanjamesross/VtPcm/ nhưng tôi không thể làm cho nó hoạt động với tình huống của mình.

Dưới đây là html cho hộp phần:

<div id="social-float"> 
     <div class="sf-twitter"> 
      ... 
     </div> 

     <div class="sf-facebook"> 
      ... 
     </div> 

     <div class="sf-plusone"> 
      ... 
     </div> 
    </div> 

... và CSS:

#social-float{ 
position: fixed; 
bottom: 10px; 
left: 10px; 
width: 55px; 
padding: 10px 5px; 
text-align: center; 
background-color: #fff; 
border: 5px solid #ccd0d5; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
display: none; 
} 

Các chân là #footer và nó không có chiều cao cố định, nếu điều đó làm cho bất kỳ sự khác biệt.

Nếu ai đó có thể hỗ trợ tôi trong việc tạo ra một giải pháp jQuery đơn giản cho điều này, tôi rất cảm kích!

Answer 1

Live demo

đầu tiên, kiểm tra của nó bù đắp mỗi khi bạn di chuyển trang

$(document).scroll(function() { 
    checkOffset(); 
}); 

và làm cho vị thế của mình tuyệt đối nếu nó đã được bắn rơi dưới 10px trước chân.

function checkOffset() { 
    if($('#social-float').offset().top + $('#social-float').height() 
              >= $('#footer').offset().top - 10) 
     $('#social-float').css('position', 'absolute'); 
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) 
     $('#social-float').css('position', 'fixed'); // restore when you scroll up 
} 

thông báo rằng cha mẹ #social-float 's nên anh chị em ruột của chân

<div class="social-float-parent"> 
    <div id="social-float"> 
     something... 
    </div> 
</div> 
<div id="footer"> 
</div> 

chúc may mắn :)

Answer 2

Tôi vừa mới giải quyết vấn đề này trên một trang web tôi đang làm việc trên, và nghĩ rằng tôi sẽ chia sẻ nó với hy vọng nó sẽ giúp ai đó.

Giải pháp của tôi mất khoảng cách từ chân trang đến đầu trang - nếu người dùng đã cuộn xa hơn nữa, nó sẽ kéo thanh bên trở lại với lề âm.

$(window).scroll(function() { 

// distance from top of footer to top of document 
footertotop = ($('#footer').position().top); 
// distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding) 
scrolltop = $(document).scrollTop()+570; 
// difference between the two 
difference = scrolltop-footertotop; 

// if user has scrolled further than footer, 
// pull sidebar up using a negative margin 

if (scrolltop > footertotop) { 

$('#cart').css('margin-top', 0-difference); 
} 

else { 
$('#cart').css('margin-top', 0); 
} 


}); 

Answer 3

Tôi chạy vào vấn đề này cùng thời gian gần đây, gửi giải pháp của tôi cũng ở đây: Preventing element from displaying on top of footer when using position:fixed

Bạn có thể đạt được một giải pháp tận dụng position tài sản của các phần tử với jQuery, chuyển đổi giữa các giá trị mặc định (static cho divs), fixed và absolute. Bạn cũng sẽ cần phần tử vùng chứa cho phần tử cố định của mình. Cuối cùng, để ngăn phần tử cố định đi qua chân trang, phần tử vùng chứa này không thể là phần tử cha của chân trang.

Phần javascript liên quan đến việc tính toán khoảng cách tính bằng pixel giữa phần tử cố định và phần đầu tài liệu, và so sánh nó với vị trí dọc hiện tại của thanh cuộn tương đối với đối tượng cửa sổ (tức là số điểm ảnh trên đó bị ẩn từ vùng hiển thị của trang) mỗi lần người dùng cuộn trang. Khi, khi cuộn xuống, phần tử cố định sắp biến mất ở trên, chúng tôi thay đổi vị trí của nó thành cố định và dán trên đầu trang.

Điều này làm cho phần tử cố định đi qua chân trang khi chúng tôi cuộn xuống dưới cùng, đặc biệt nếu cửa sổ trình duyệt nhỏ. Vì vậy, chúng tôi sẽ tính toán khoảng cách tính bằng pixel của chân trang từ đầu tài liệu và so sánh nó với chiều cao của phần tử cố định cộng với vị trí dọc của thanh cuộn: khi phần tử cố định sắp đi qua chân trang, chúng tôi sẽ thay đổi vị trí của nó thành tuyệt đối và dính ở phía dưới, ngay phía trên chân.

Đây là ví dụ chung.

Cấu trúc HTML:

<div id="content"> 
    <div id="leftcolumn"> 
     <div class="fixed-element"> 
      This is fixed 
     </div> 
    </div> 
    <div id="rightcolumn">Main content here</div> 
    <div id="footer"> The footer </div> 
</div> 

CSS:

#leftcolumn { 
    position: relative; 
} 
.fixed-element { 
    width: 180px; 
} 
.fixed-element.fixed { 
    position: fixed; 
    top: 20px; 
} 
.fixed-element.bottom { 
    position: absolute; 
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */ 
} 

Các JS:

// Position of fixed element from top of the document 
var fixedElementOffset = $('.fixed-element').offset().top; 
// Position of footer element from top of the document. 
// You can add extra distance from the bottom if needed, 
// must match with the bottom property in CSS 
var footerOffset = $('#footer').offset().top - 36; 

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls 
$(window).scroll(function (event) { 

    // Y position of the vertical scrollbar 
    var y = $(this).scrollTop(); 

    if (y >= fixedElementOffset && (y + fixedElementHeight) < footerOffset) { 
     $('.fixed-element').addClass('fixed'); 
     $('.fixed-element').removeClass('bottom');   
    } 
    else if (y >= fixedElementOffset && (y + fixedElementHeight) >= footerOffset) { 
     $('.fixed-element').removeClass('fixed');   
     $('.fixed-element').addClass('bottom'); 
    } 
    else { 
     $('.fixed-element').removeClass('fixed bottom'); 
    } 

}); 

Answer 4

này làm việc cho tôi -

HTML -

<div id="sideNote" class="col-sm-3" style="float:right;"> 

</div> 
<div class="footer-wrap"> 
     <div id="footer-div"> 
     </div>  
</div> 

CSS -

#sideNote{right:0; margin-top:10px; position:fixed; bottom:0; margin-bottom:5px;} 

#footer-div{margin:0 auto; text-align:center; min-height:300px; margin-top:100px; padding:100px 50px;} 

JQuery -

function isVisible(elment) { 
    var vpH = $(window).height(), // Viewport Height 
     st = $(window).scrollTop(), // Scroll Top 
     y = $(elment).offset().top; 

    return y <= (vpH + st); 
} 

function setSideNotePos(){ 
    $(window).scroll(function() { 
     if (isVisible($('.footer-wrap'))) { 
      $('#sideNote').css('position','absolute'); 
      $('#sideNote').css('top',$('.footer-wrap').offset().top - $('#sideNote').outerHeight() - 100); 
     } else { 
      $('#sideNote').css('position','fixed'); 
      $('#sideNote').css('top','auto'); 
     } 
    }); 
} 

Bây giờ gọi hàm này như thế này -

$(document).ready(function() { 
    setSideNotePos(); 
}); 

PS - Các chức năng Jquery được sao chép từ một câu trả lời khác câu hỏi tương tự trên stackoverflow, nhưng nó đã không làm việc cho tôi đầy đủ. Vì vậy, tôi đã sửa đổi nó thành các chức năng này, như chúng được hiển thị ở đây. Tôi nghĩ rằng các vị trí vv thuộc tính để divs của bạn sẽ phụ thuộc vào cách divs được cấu trúc, cha mẹ và anh chị em của họ là ai.

Chức năng trên hoạt động khi cả hai sideNote và footer-wraps là anh chị em trực tiếp.

Answer 5

Đây là giải pháp @Sang nhưng không có Jquery.

var socialFloat = document.querySelector('#social-float'); 
 
var footer = document.querySelector('#footer'); 
 

 
function checkOffset() { 
 
    function getRectTop(el){ 
 
    var rect = el.getBoundingClientRect(); 
 
    return rect.top; 
 
    } 
 
    
 
    if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10) 
 
    socialFloat.style.position = 'absolute'; 
 
    if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop)) 
 
    socialFloat.style.position = 'fixed'; // restore when you scroll up 
 
    
 
    socialFloat.innerHTML = document.body.scrollTop + window.innerHeight; 
 
} 
 

 
document.addEventListener("scroll", function(){ 
 
    checkOffset(); 
 
});

div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; } 
 
div#social-float { width: 200px; position: fixed; bottom: 10px; background: #777; } 
 
div#footer { width: 100%; height: 200px; background: #eee; }

<div class="social-float-parent"> 
 
    <div id="social-float"> 
 
     float... 
 
    </div> 
 
</div> 
 
<div id="footer"> 
 
</div>

Answer 6

tôi đã đi với một sửa đổi của @ user1097431 's câu trả lời:

function menuPosition(){ 
// distance from top of footer to top of document 
var footertotop = ($('.footer').position().top); 
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding) 
var scrolltop = $(document).scrollTop() + window.innerHeight; 
// difference between the two 
var difference = scrolltop-footertotop; 

// if user has scrolled further than footer, 
// pull sidebar up using a negative margin 
if (scrolltop > footertotop) { 
    $('#categories-wrapper').css({ 
     'bottom' : difference 
    }); 
}else{ 
    $('#categories-wrapper').css({ 
     'bottom' : 0 
    }); 
}; 
};