Форум

zava75 · #1 (**permalink**) 29.12.2018, 20:14

Добрый день, может кто знает я зафиксировал блок #fixed как правильно прописать остановку при появлении блока футера #Footer в if я так понимаю?

$(document).ready(function () {
   // var offsetFooter = $('#Footer').offset();
    var offset = $('#fixed').offset();
    var topPadding = 0;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top ) {
            $('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
        }
        else {
            $('#fixed').stop().animate({marginTop: 0});
        }
    });
});

рони · #2 (**permalink**) 29.12.2018, 22:30

zava75,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      position: relative;
      height: 2000px;
      padding: 0;
      margin: 0;
  }

  #fixed{

      height:  50px;
      width: 100%;
      top: 40px;
      position: absolute;
      background-color: #A9A9A9;
      border-bottom: 3px solid #FF00FF;
  }
 #Footer{
      background-color: #8FBC8B;
      width: 100%;
      height:  1500px;
      position: absolute;
      bottom: 0;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function () {
    var offset = $('#fixed').offset().top; 
    var height = $('#fixed').outerHeight(true);
    var offsetFooter = $('#Footer').offset().top - height;
    var topPadding = 0;
    $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            var top = Math.min(offsetFooter, scroll + offset);
            $('#fixed').stop().animate({top: top});
    });
});

  </script>
</head>

<body>
<div id="fixed">fixed</div>
<div id="Footer">Footer</div>
</body>
</html>

zava75 · #3 (**permalink**) 30.12.2018, 11:57

Спасибо! за помощь!!! Так как вы сделали не получилось, как сайт на ворд пресс + тема нельзя использовать стили с значениями position: absolute;
Решил так, выкинул анимацию , не знаю работает но правильно код написал.?

$(document).ready(function () {
    var height = $('#fixed').outerHeight(true);
    var offsetFooter = $('#Footer').offset().top - height;
    var offset = $('#fixed').offset();
    var topPadding = 0;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top && $(window).scrollTop()  < offsetFooter - height ) {
            $('#fixed').css({marginTop: $(window).scrollTop() - offset.top + topPadding});
        }
        else {
            $('#fixed').css({marginTop: 0});
        }
    });
});

Форум

Справочник

Discord чат

Курсы javascript