it-swarm.com.de

Fixe Position in der Fußzeile stoppen

Ich suche nach einer Lösung für das beliebte Problem, ein feststehendes Objekt an der Fußzeile der Seite anzuhalten.

Ich habe im Grunde ein festes "Share" -Feld in der unteren linken Ecke des Bildschirms und ich möchte nicht, dass es über die Fußzeile blättert. Ich brauche es also, um 10px über der Fußzeile anzuhalten.

Ich habe andere Fragen hier und auch andere betrachtet. Die nächstliegende/einfachste Demo, die ich finden konnte, ist http://jsfiddle.net/bryanjamesross/VtPcm/ , aber ich konnte es nicht schaffen, mit meiner Situation zu arbeiten.

Hier ist die HTML-Datei für die Share-Box:

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

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

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

... und das 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;
}

Die Fußzeile ist #footer und hat keine feste Höhe, wenn dies einen Unterschied macht.

Wenn mir jemand bei der Erstellung einer einfachen jQuery-Lösung helfen könnte, wäre ich sehr dankbar!

33
scferg5

Live Demo

Überprüfen Sie zuerst den Offset jedes Mal, wenn Sie die Seite scrollen

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

und machen seine Position absolut, wenn sie vor der Fußzeile unter 10px heruntergefahren wurde.

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
}

beachten Sie, dass #social-floats Elternteil der Fußzeile ein Geschwister sein sollte

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

viel Glück :)

52
Sang

Ich habe dieses Problem gerade auf einer Website gelöst, an der ich gerade arbeite. Ich dachte, ich würde es in der Hoffnung teilen, dass es jemandem hilft.

Bei meiner Lösung wird der Abstand von der Fußzeile zum oberen Rand der Seite verwendet. Wenn der Benutzer weiter gescrollt hat, wird die Seitenleiste mit einem negativen Rand nach oben gezogen.

$(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);
  }
});
20
user1097431

Ich bin vor kurzem auf dieselbe Ausgabe gestoßen und habe meine Lösung auch hier veröffentlicht: Verhindert, dass das Element bei Verwendung der Position auf der Fußzeile angezeigt wird: fixed

Sie erreichen eine Lösung, die die position-Eigenschaft des Elements mit jQuery nutzt und zwischen dem Standardwert (static für divs), fixed und absolute..__ wechselt. Sie benötigen außerdem ein Containerelement für Ihr festes Element. Um zu verhindern, dass das feste Element über die Fußzeile hinausgeht, kann dieses Containerelement nicht das übergeordnete Element der Fußzeile sein.

Der Javascript-Teil beinhaltet die Berechnung der Entfernung in Pixeln zwischen Ihrem festen Element und dem oberen Rand des Dokuments und den Vergleich mit der aktuellen vertikalen Position der Bildlaufleiste relativ zum Fensterobjekt (dh der Anzahl der Pixel, die über dem sichtbaren Bereich verborgen sind) der Seite) jedes Mal, wenn der Benutzer die Seite durchblättert ... Wenn das feste Element beim Abwärtsblättern oben verschwindet, ändern wir seine Position in "Fest" und bleiben oben auf der Seite. 

Dies führt dazu, dass das fixierte Element über die Fußzeile hinausgeht, wenn wir nach unten scrollen, insbesondere wenn das Browserfenster klein ist .. _. Deshalb berechnen wir den Abstand der Fußzeile in Pixel vom oberen Rand des Dokuments und vergleichen ihn mit die Höhe des festen Elements plus die vertikale Position der Bildlaufleiste: Wenn das feste Element dabei ist, die Fußzeile zu überschreiten, ändern wir seine Position in absolut und bleiben unten, direkt über der Fußzeile.

Hier ist ein allgemeines Beispiel.

Die HTML-Struktur:

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

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

Die 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

Hier ist die @Sang-Lösung, jedoch ohne 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>

3
Lionel Paulus

Das hat für mich funktioniert -

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

Rufen Sie nun diese Funktion so auf -

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

PS - Die Jquery-Funktionen werden aus einer Antwort auf eine andere ähnliche Frage in stackoverflow kopiert, aber sie funktionierte für mich nicht vollständig. Also habe ich sie an diese Funktionen angepasst, wie sie hier gezeigt werden. Ich denke, die Position usw. der Divs hängt davon ab, wie die Divs strukturiert sind, wer ihre Eltern und Geschwister sind.

Die obige Funktion funktioniert, wenn sowohl sideNote- als auch Footer-Wraps direkte Geschwister sind.

2
Nalin Agrawal

Sie können jetzt verwenden 

#myObject{
  position:sticky;
}

Hoffe das hilft..

1
Arthur M

Ich ging mit einer Änderung der Antwort von @ 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