フッタの固定位置を停止する

Question

私は、ページのフッターで固定オブジェクトを停止するという一般的な問題の解決策を探しています。

私は基本的に画面の左下隅に固定「共有」ボックスがあり、フッターの上にスクロールしたくないので、フッターの上には10pxを停止する必要があります。

私はここで他の質問も見ました。私が見つけることができる最も近い/最も簡単なデモはhttp://jsfiddle.net/bryanjamesross/VtPcm/ですが、私はそれを自分の状況で動作させることができませんでした。

ここでは、共有ボックスのHTMLです：

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

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

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

...と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; 
} 

フッタが#footerであり、それが可能ならば、それは、一定の高さを持っていません任意の違い。

誰かがこのための簡単なjQueryソリューションの作成を手伝ってくれたら、私はそれを感謝します！

Answer 1

Live demo

まず、そのページ

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

をスクロールするたびにオフセットし、それはフッターの前に10pxの下撃墜された場合、その位置は、絶対にするを確認してください。

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 
} 

#social-floatの親はフッターの兄弟

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

幸運:)

Answer 2

なければならないことを通知は、私はちょうど、私が働いているサイトでこの問題を解決してきました私はそれが誰かを助けてくれることを希望して共有すると思っていました。

解決方法は、フッターからページの上部までの距離です。ユーザーがそれ以上スクロールすると、マイナスのマージンでサイドバーが元に戻ります。

私は最近、これと同じ問題に遭遇した

$(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

は、また、ここに私の解決策を掲載： Preventing element from displaying on top of footer when using position:fixed

をデフォルト値の切り替え、jQueryを使って要素のposition財産を活用するソリューションを実現することができます（staticdivs）、fixedおよびabsolute。 固定要素のコンテナ要素も必要です。最後に、固定要素がフッターに移動しないようにするために、このコンテナ要素はフッターの親になることはできません。

javascriptの部分では、固定要素とドキュメントの上端との間の距離をピクセル単位で計算し、ウィンドウオブジェクトに対するスクロールバーの現在の垂直位置と比較します（つまり、上に隠れているピクセル数ユーザーがページをスクロールするたびに、ページの可視領域から） スクロールダウン時に固定要素が上に表示されなくなると、その位置が固定されてページの上に固定されます。

これは、ブラウザのウィンドウが小さい場合は特に、我々は一番下までスクロールすると、固定要素はフッターの上に行くことになります。 したがって、ドキュメントの上端からフッターのピクセル単位の距離を計算し、固定要素の高さとスクロールバーの垂直位置とを比較します。固定要素がフッターを移動しようとしているとき、その位置を絶対に変更し、フッターのすぐ下にある底にスティックします。

ここには一般的な例があります。

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 */ 
} 

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

これは私のために働いた -

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'); 
     } 
    }); 
} 

さて、このように、この関数を呼び出す -

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

PS - jQueryの関数は別の答​​えからコピーされますstackoverflowで同様の質問が、それは私のために完全に働いていませんでした。そこで、ここに示すように、これらの関数に変更しました。あなたのdivへの位置などの属性は、divがどのように構造化されているか、両親や兄弟が誰であるかによって異なります。

追記とフッターラップの両方が直接の兄弟であるとき、上記の機能が動作します。ここで

Answer 5

はjqueryののないものの@Sangソリューションです。

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

私は@ user1097431の答えの修正と一緒に行きました：あなたが必要なものからフィドルが異なる何

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 
    }); 
}; 
};