An einer bestimmten Stelle das Scrollen mit fester Position stoppen?

94

Ich habe ein Element, das Position ist: fest und scrollt so mit der Seite, wie ich es aber möchte. Wenn der Benutzer einen Bildlauf durchführt, soll das Element an einem bestimmten Punkt aufhören zu scrollen, z. B. wenn es 250 Pixel vom oberen Rand der Seite entfernt ist. Ist dies möglich? Jede Hilfe oder Beratung wäre hilfreich, danke!

Ich hatte das Gefühl, dass ich dazu jquery verwenden müsste. Ich habe versucht, den Bildlauf oder die Position des Benutzers zu ermitteln, war aber sehr verwirrt. Gibt es irgendwelche Abfragelösungen?

jquery css positioning Louise McComiskey
quelle
1
Soweit ich weiß, kann nur eine Javascript-basierte Lösung das tun, was Sie wollen. Es gibt keine reine CSS-Lösung, die das macht.
Cdeszaq

Antworten:

124

Hier ist ein schnelles jQuery-Plugin, das ich gerade geschrieben habe und das das kann, was Sie benötigen:

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

Siehe Arbeitsbeispiel →

mVChr
quelle
Das sieht vielversprechend aus, ja, was ich dachte, die Positionierung an bestimmten Punkten zu ändern. Ich lasse Sie wissen, wie es mir geht, danke!
Louise McComiskey
1
Hallo ja danke vielmals mit ein paar Wochen genau das, was ich wollte und es funktioniert jetzt perfekt danke nochmal.
Louise McComiskey
3
$('window')sollte nicht in Anführungszeichen stehen. Aber danke dafür, es war sehr hilfreich.
Jeff
137

Meinst du so etwas?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

Code-Snippet anzeigen

James Montagne
quelle
Großartig, vielen Dank! Obwohl meine Aufgabe darin bestand, die Schaltfläche "Nach oben" zu erstellen, die sich immer über der Fußzeile befindet, habe ich diesen Code ein wenig geändert. Siehe meine Version hier (js Kaffee): jsfiddle.net/9vnwx3fa/2
Alb
@ James Montagne - Was wäre die Lösung für die Umkehrung dieses Codes, wenn ich das feste Element klebrigen Boden wollte: 0; auf scrollen und dann 250px stoppen, bevor es zum Ende der Seite kommt?
BoneStarr
1
@BoneStarr das ist etwas komplexer. Sie müssten das aktuelle scrollTop mit der Höhe der Seite und dem Ansichtsfenster vergleichen. Dann würden Sie einfach den gleichen Code wie oben verwenden, außer mit bottomund diesem berechneten Wert (Versatz um 250) in der max.
James Montagne
@ JamesMontagne - Gibt es eine Chance, diese Geige näher zu erläutern? Würde es wirklich schätzen, da ich mit diesem festgefahren bin. jsfiddle.net/Hf5wH/137
BoneStarr
1
@bonestarr Deutlich komplizierter als dieser. Sie sollten es auf mehrere Codezeilen erweitern, sonst ist es wirklich schwer zu verstehen. jsfiddle.net/Hf5wH/139
James Montagne
19

Hier ist ein vollständiges JQuery-Plugin, das dieses Problem löst:

https://github.com/bigspotteddog/ScrollToFixed

Die Beschreibung dieses Plugins lautet wie folgt:

Dieses Plugin wird verwendet, um Elemente am oberen Rand der Seite zu fixieren, wenn das Element vertikal aus der Ansicht gerollt worden wäre. Es erlaubt dem Element jedoch, sich mit dem horizontalen Bildlauf weiter nach links oder rechts zu bewegen.

Bei einer Option marginTop bewegt sich das Element nicht mehr vertikal nach oben, sobald der vertikale Bildlauf die Zielposition erreicht hat. Das Element bewegt sich jedoch weiterhin horizontal, wenn die Seite nach links oder rechts gescrollt wird. Sobald die Seite über die Zielposition hinaus nach unten gescrollt wurde, wird das Element an seiner ursprünglichen Position auf der Seite wiederhergestellt.

Dieses Plugin wurde in Firefox 3/4, Google Chrome 10/11, Safari 5 und Internet Explorer 8/9 getestet.

Verwendung für Ihren speziellen Fall:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});
bigspotteddog
quelle
1
Danke, ja, das sieht wirklich nützlich aus. Ich habe eine vorherige Antwort verwendet, da dieses Projekt vor ein paar Monaten war. Ich werde dies jedoch definitiv für zukünftige Projekte berücksichtigen. Es sieht einfacher aus. Danke :)
Louise McComiskey
6

Sie können das tun, was James Montagne mit seinem Code in seiner Antwort getan hat, aber das lässt es in Chrome (getestet in V19) flackern.

Sie können dies beheben, wenn Sie "Rand oben" anstelle von "oben" setzen. Ich weiß nicht wirklich, warum es mit Margin tho funktioniert.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

Jure Ravlić
quelle
Dies funktioniert auch hervorragend für feste Elemente unter Text. Ich hatte ein ernstes Problem mit kleinen Bildschirmanzeigen und meine festen Bildlaufelemente wurden in kleineren Bereichen wie 1024 x 768 bis zum oberen Rand des Browsers ausgeführt. Dies löste das Problem.
Joshua
2

meine Lösung 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });
user3288218
quelle
2

In einem Projekt ist beim Laden der Seite tatsächlich eine Überschrift am unteren Bildschirmrand fixiert (es handelt sich um eine Zeichen-App, sodass sich die Überschrift unten befindet, um dem Canvas-Element im breiten Ansichtsfenster maximalen Platz zu geben).

Ich brauchte die Überschrift, um 'absolut' zu werden, wenn sie die Fußzeile beim Scrollen erreicht, da ich die Überschrift nicht über der Fußzeile haben möchte (die Überschriftenfarbe entspricht der Hintergrundfarbe der Fußzeile).

Ich habe hier die älteste Antwort erhalten (bearbeitet von Gearge Millo) und dieses Code-Snippet hat für meinen Anwendungsfall funktioniert. Mit einigem Herumspielen habe ich das zum Laufen gebracht. Jetzt sitzt die feste Überschrift wunderschön über der Fußzeile, sobald sie die Fußzeile erreicht.

Ich dachte nur, ich würde meinen Anwendungsfall und seine Funktionsweise teilen und mich bedanken! Die App: http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }
Joseph Falconer
quelle
1

Ich habe einen Blog-Beitrag darüber geschrieben , der diese Funktion enthält:

$.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};
Nathan McGinness
quelle
0

Eine Lösung mit Mootools Framework.

http://mootools.net/docs/more/Fx/Fx.Scroll

  1. Holen Sie sich die Position (x & y) des Elements, an dem Sie den Bildlauf stoppen möchten, mit $ ('myElement'). GetPosition (). X.

    $ ('myElement'). getPosition (). y

  2. Verwenden Sie für eine Art Animation einen Bildlauf:

    new Fx.Scroll ('scrollDivId', {offset: {x: 24, y: 432}}). toTop ();

  3. Um den Bildlauf sofort einzustellen, verwenden Sie:

    neues Fx.Scroll (myElement) .set (x, y);

Hoffe das hilft !! : D.

Zohaib
quelle
0

Diese Lösung hat mir gefallen 

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

Mein Problem war, dass ich mich mit einem positionsbezogenen Container in Adobe Muse befassen musste.

Meine Lösung:

$(window).scroll(function(){
    if($(this).scrollTop()>425) {
         $("#theRelative").css("margin-top",$(this).scrollTop()-425);
    }
});
leu
quelle
0

Nur improvisierter mVChr-Code

$(".sidebar").css('position', 'fixed')

    var windw = this;

    $.fn.followTo = function(pos) {
        var $this = this,
                $window = $(windw);

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);
Sreeraj
quelle
Der Grund für das Speichern $(this)und $(window)in Variablen ist, dass Sie nur tun müssen $this.height()und so weiter. Wäre es nicht besser, anstatt eine obere Position festzulegen, wenn das Plugin den ursprünglichen oberen Wert speichert und beim Festlegen einer festen Breite darauf zurückgreift? Und was meinst du damit Just improvised mVChr code?
Cyclonecode
0

Ich habe die Antwort von @ mVchr angepasst und invertiert, um sie für die klebrige Anzeigenpositionierung zu verwenden: Wenn Sie sie unbedingt positionieren müssen (Scrollen), bis der Header-Junk nicht mehr auf dem Bildschirm angezeigt wird, aber danach auf dem Bildschirm fixiert / sichtbar bleiben muss:

$.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

CSS:

#sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}
cbmtrx
quelle
0

Ich habe die Antwort von @james geliebt, aber ich habe nach der Umkehrung gesucht, dh nach der festen Position kurz vor der Fußzeile. Hier ist, was ich mir ausgedacht habe

var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

Jetzt würde das feste Element direkt vor der Fußzeile anhalten. und wird sich nicht damit überschneiden.

mshahbazm
quelle