Javascript-форум - Плавающий блок, замирающий над футером

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Плавающий блок, замирающий над футером (https://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html)

ничего не изменилось.

JohnJohn,
а так?
window.onscroll = window.resize =

пробовал, тоже нет(

JohnJohn,
можно только гадать в чём у вас проблема?

вот код.

<html>
  <head>
    <style>
    html, body {
      height: 100%;
    }
      .main {
        height: 100%;
      }
      .second_block {
        height: 100%;
      }
      #download_present_img{
        position: fixed;
    z-index: 9999;
    right: 15px;
    bottom: 20px;
    font-size: 50px;
    font-style: normal;
    margin-left: 20px;
    width: 40px;
    height: 40px;
    background: red;
}
.footer_block {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 190px;
    bottom: 0;
    left: 0;
}

.footer {
    color: #ffffff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 190px;
    background: #000;
}
    </style>
  </head>

  <body>
    <div class="main"></div>
    <div class='second_block'>
    <div id="download_present_img"></div>
    </div>
    <div id="footer_stop"  class="footer_block">
<div  class="footer">
<div class="text_footer">
  <p>footer</p>
</div>
    </div>
    </div>

    
<script>
      function offset(a) {
     for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
     return b
 }
 var s = !0;
 window.onload = function () {
     var a = document.getElementById("download_present_img"),
         b = offset(a),
         f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
         d = a.offsetHeight + parseInt(f.marginTop) || 0,
         e = offset(document.getElementById("footer_stop"));
     window.onscroll = window.resize = function () {
         var c = window.pageYOffset || document.documentElement.scrollTop,
             c = e - (c + d + b);
         s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") :
             (a.style.top = e - d + "px", a.style.position = "absolute"))
     }
 };

</script>
 

  </body>
</html>

JohnJohn,

вариант...

<!DOCTYPE html>

<html>
  <head>
    <style>
    html, body {
      height: 100%;
    }
      .main {
        height: 100%;
      }
      .second_block {
        height: 100%;
      }
      #download_present_img{
        position: fixed;
    z-index: 9999;
    right: 15px;
    bottom: 20px;
    font-size: 50px;
    font-style: normal;
    margin-left: 20px;
    width: 40px;
    height: 40px;
    background: red;
}
.footer_block {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 190px;
    bottom: 0;
    left: 0;
}

.footer {
    color: #ffffff;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 190px;
    background: #000;
}
    </style>
  </head>

  <body>
    <div class="main"></div>
    <div class='second_block'>
    <div id="download_present_img"></div>
    </div>
    <div id="footer_stop"  class="footer_block">
<div  class="footer">
<div class="text_footer">
  <p>footer</p>
</div>
    </div>
    </div>


<script>
      function offset(a) {
     for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
     return b
 }
 var s = !0;
 window.onload = function () {
     var a = document.getElementById("download_present_img"),
         b = offset(a),
         f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
         d = a.offsetHeight + parseInt(f.marginTop) || 0,
         e = offset(document.getElementById("footer_stop"));
     window.onresize = function() {
    window.scrollTo(0,0);
    s = !0;
    a.style.position = "fixed";
    a.style.top = "";
    b = offset(a);
    e = offset(document.getElementById("footer_stop"));
};

     window.onscroll =  function () {
         var c = window.pageYOffset || document.documentElement.scrollTop,
             c = e - (c + d + b);
         s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") :
             (a.style.top = e - d + "px", a.style.position = "absolute"))
     }
 };

</script>


  </body>
</html>

Хороший вариант... И как вам это в голову приходит!?! Спасибо.

Цитата:

Сообщение от рони (Сообщение 444491)

EvgenyTryap,
при условии DOCTYPE ...

<!DOCTYPE html>
<html>
 <head>
 <style>
 html *{
   margin:0;
   padding:0;
 }

 .wrapper{
   height:1500px;
   position:relative;
 }

 .footer{
   background:#F00;
   height:300px;
   border-top: rgb(255, 255, 0) 1px  dashed;
 }

 .sidebar{
   height:50px;
   position:fixed;
   bottom:0;
   left:0;
   right:0;
   background-color:#FF0000;
 }

 .sidebar.move{
   position:absolute;
 }

 </style>
   <script>
  window.addEventListener('DOMContentLoaded', function() {
      var footer = document.querySelector('.footer'),
          sidebar = document.querySelector('.sidebar'),
          top, height;
      document.addEventListener('scroll', function() {
          top = footer.getBoundingClientRect().top;
          height = document.documentElement.clientHeight;
          sidebar.classList[top < height ? "add" : "remove"]('move');
      });
  });
   </script>
 </head>
 <body>

 <div class="wrapper">
 <p>Your website content here.</p>
 <div class="sidebar">fixed block</div>
 </div>
 <div class="footer">
 <p>footer text</p>
 </div>

 </body>
 </html>

Цитата:

Сообщение от рони (Сообщение 446766)

EvgenyTryap,
document.body.addEventListener('scroll'

Подскажите, пожалуйста, а как это реализовать если прокрутка в блоке div (например с id="content") реализована?

EvgenyTryap,
сделайте минимальный макет, иначе можно только гадать.

content.addEventListener(\'scroll\'