web-dev-qa-db-ja.com

フッターで固定位置を停止

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

基本的に、画面の左下隅に固定された「共有」ボックスがあり、フッターの上をスクロールしたくないので、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ソリューションの作成を手伝ってくれたら、とても感謝しています！

javascriptjquerycssscrollfixed
39
scferg5

ライブデモ

最初に、ページをスクロールするたびにオフセットを確認します

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

フッターの前で10ピクセル未満にダウンしている場合、その位置を絶対にします。

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>

がんばろう ：）

58
Sang

作業中のサイトでこの問題を解決したばかりで、誰かの助けになることを願って共有したいと思いました。

私の解決策は、フッターからページの上部までの距離を取ります-ユーザーがこれ以上スクロールすると、サイドバーを負のマージンで引き上げます。

$(window).scroll(() => { 
  // Distance from top of document to top of footer.
  topOfFooter = $('#footer').position().top;
  // Distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding).
  scrollDistanceFromTopOfDoc = $(document).scrollTop() + 570;
  // Difference between the two.
  scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfDoc - topOfFooter;

  // If user has scrolled further than footer,
  // pull sidebar up using a negative margin.
  if (scrollDistanceFromTopOfDoc > topOfFooter) {
    $('#cart').css('margin-top',  0 - scrollDistanceFromTopOfFooter);
  } else  {
    $('#cart').css('margin-top', 0);
  }
});
21
user1097431

以下は@Sangソリューションですが、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>
6
Lionel Paulus

私は最近この同じ問題に遭遇し、私のソリューションをここにも投稿しました： position：fixed を使用するときにフッターの上に要素が表示されないようにします

JQueryを使用して要素のpositionプロパティを活用し、デフォルト値（staticの場合はdivs）、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');
    }

 });
4
Emanuele Pane

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

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がどのように構成されているか、親や兄弟が誰であるかによって決まると思います。

上記の関数は、sideNoteとフッターラップの両方が直接の兄弟である場合に機能します。

2
Nalin Agrawal

使用できるようになりました

#myObject{
  position:sticky;
}

お役に立てれば..

0
Arthur M

私は@ 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
   });
 };
};
0
Brainmaniac
$(window).scroll(() => {
    const footerToTop = $('.your-footer').position().top;
    const scrollTop = $(document).scrollTop() + $(window).height();
    const difference = scrollTop - footerToTop;
    const bottomValue = scrollTop > footerToTop ? difference : 0;
    $('.your-fixed-element').css('bottom', bottomValue);
});
0
Ali Klein