Jak zablokować stały element pływający w #footer?

Poniżej znajduje się kod, którego używam do naprawienia paska bocznego podczas przewijania użytkownika. Od tej pory pokrywa się ze stopką. Jak mogę go zatrzymać w określonym momencie lub kiedy trafi stopkę?Jak zablokować stały element pływający w #footer?

<script type="text/javascript"> 
    $(document).ready(function() { 
    if ($('.pageheaderwrap').length) { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 362) { 
       $(".sidebar-left").css({ 
        "position": "fixed", 
        "top": 0 
       }); 
      } else { 
       $(".sidebar-left").css({ 
        "position": "absolute", 
        "top": "255px" 
       }); 
      } 
     }); 
    } else { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 230) { 
       $(".sidebar-left").css({ 
        "position": "fixed", 
        "top": 0 
       }); 
      } else { 
       $(".sidebar-left").css({ 
        "position": "absolute", 
        "top": "125px" 
       }); 
      } 
     }); 
    } 
}); 
</script>

Źródło

2011-07-15 Mike Stevenson

@Cybernate: Czy tylko o samemu naprawić wcięcia. :-) – GregL

Możesz określić odległość między dwoma elementami (stopką i bocznym), a kiedy ta odległość <= 0 możesz przestać przesuwać pasek boczny w dół. Sprawdź ten wpis: http://stackoverflow.com/questions/225563/get-relative-position-between-2-dom-elements-using-javascript. –

Dlaczego nie wyeliminować wszystkie javascript i zrobić to z CSS:

.sidebar-left { 
    position: fixed; 
    bottom: 20px; /* height of your footer */ 
}

Źródło

2011-07-15 02:25:43 Adam

Wyobrażam sobie, że chce, aby przylgnęła do dna, dopóki nie zderzy się ze stopką, a następnie przyklei się do górnej części stopki. – AlienWebguy

Ahhh, w tym przypadku musi ustawić dno: wysokość stopki, gdy dojdzie do stopki – Adam

Tak, doskonałym przykładem tego, co próbuję osiągnąć, jest mapa praw na na Yelp: http: // www. yelp.com/search?find_desc=food&ns=1&find_loc=Santa+Rosa%2C+CA –

Tutaj jest coś, co może pracować dla Ciebie:

http://jsfiddle.net/y3qV5/7/

Wtyczka jQuery że robi ten zestaw elementów jest ustalany niezależnie od marginesu od góry strony. Za pomocą opcjonalnego limitu zostanie on odblokowany i będzie kontynuował przewijanie strony w górę, trzymając ją z dala od stopki. Ustawiasz limit na górze stopki, a także wysokość dowolnego elementu docelowego.

Oto Wykorzystanie kodu dla tego scenariusza (skrzypce powyżej):

$(document).ready(function() { 
    $('#cart').scrollToFixed({ 
     marginTop: 10, 
     limit: $('#footer').offset().top 
    }); 
});

Oto link do wtyczki i jej źródła:

https://github.com/bigspotteddog/ScrollToFixed

Źródło

2011-09-01 03:46:23 bigspotteddog

Jak zablokować stały element pływający w #footer?

Odpowiedz

Powiązane problemy