Parando a rolagem de posição fixa em um determinado ponto?

Eu tenho um elemento que é a posição: fixo e então rola com a página como eu quero no entanto. quando o usuário rola para cima, quero que o elemento pare de rolar em um determinado ponto, digamos, quando está 250px do topo da página, isso é possível? Qualquer ajuda ou conselho seria útil, obrigado!

Tive a sensação de que precisaria usar jquery para fazer isso. Eu tentei obter a rolagem ou localização de onde o usuário está, mas fiquei muito confuso, há alguma solução jquery?

Aqui está um plug-in jQuery rápido que acabei de escrever que pode fazer o que você precisa:

$.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);

Veja o exemplo de trabalho →

Você quer dizer mais ou menos assim?

http://jsfiddle.net/b43hj/

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theFixed" style="position:fixed;top:100px;background-color:red">SOMETHING</div>

<!-- random filler to allow for scrolling -->
STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

Aqui está um plugin jquery completo que resolve este problema:

https://github.com/bigspotteddog/ScrollToFixed

A descrição deste plugin é a seguinte:

Este plugin é usado para fixar elementos no topo da página, se o elemento tivesse rolado para fora da visualização, verticalmente; no entanto, permite que o elemento continue a se mover para a esquerda ou direita com a rolagem horizontal.

Dada uma opção marginTop, o elemento irá parar de se mover verticalmente para cima assim que a rolagem vertical atingir a posição de destino; mas, o elemento ainda se moverá horizontalmente conforme a página é rolada para a esquerda ou direita. Uma vez que a página foi rolada de volta para baixo após a posição de destino, o elemento será restaurado à sua posição original na página.

Este plug-in foi testado no Firefox 3/4, Google Chrome 10/11, Safari 5 e Internet Explorer 8/9.

Uso para seu caso particular:

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

Você pode fazer o que James Montagne fez com seu código em sua resposta, mas isso o fará piscar no Chrome (testado em V19).

Você pode consertar isso se colocar "margin-top" em vez de "top". Realmente não sei por que funciona com o margin tho.

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

http://jsbin.com/idacel

Uma possível solução SOMENTE CSS pode ser alcançada composition: sticky;

O suporte do navegador é realmente muito bom: https://caniuse.com/#search=position%3A%20sticky

aqui está um exemplo: https://jsfiddle.net/0vcoa43L/7/

minha solução

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

Em um projeto, na verdade, tenho algum título fixado na parte inferior da tela no carregamento da página (é um aplicativo de desenho, portanto, o título fica na parte inferior para dar espaço máximo para o elemento de tela na janela de visualização ampla).

Eu precisava que o título se tornasse 'absoluto' quando atingir o rodapé na rolagem, já que não quero o título acima do rodapé (a cor do título é igual à cor de fundo do rodapé).

Peguei a resposta mais antiga aqui (editada por Gearge Millo) e aquele trecho de código funcionou para meu caso de uso. Com algumas brincadeiras, consegui fazer isso funcionar. Agora, o título fixo fica lindamente acima do rodapé quando atinge o rodapé.

Pensei em compartilhar meu caso de uso e como ele funcionava, e dizer obrigado! O aplicativo: 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);
    }

Escrevi uma postagem no blog sobre isso que apresentava esta função:

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

Uma solução usando Mootools Framework.

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

1. Obtenha a posição (x e y) do elemento em que deseja parar a rolagem usando $ ('myElement'). GetPosition (). X

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

2. Para um tipo de rolagem de animação, use:

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

3. Para definir a rolagem imediatamente, use:

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

Espero que isto ajude !! : D

Gostei desta solução

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

meu problema era que eu tinha que lidar com um contêiner relativo de posição no Adobe Muse.

Minha solução:

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

Código mVChr apenas improvisado

$(".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);

Eu adaptei a resposta de @mVchr e a inverti para usar no posicionamento de anúncio fixo: se você precisar posicioná-lo absolutamente (rolando) até que o lixo do cabeçalho esteja fora da tela, mas depois precisa que ele permaneça fixo / visível na tela:

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

Adorei a resposta do @james, mas estava procurando o inverso, ou seja, pare a posição fixa antes do rodapé, aqui está o que eu descobri

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

Portanto, agora o elemento fixo iria parar antes do rodapé. e não se sobreporá a ele.