Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 25.06.2016, 01:02
Кандидат Javascript-наук
Отправить личное сообщение для aklis Посмотреть профиль Найти все сообщения от aklis
 
Регистрация: 27.04.2015
Сообщений: 99

дел
Ответить с цитированием
  #42 (permalink)  
Старый 16.02.2017, 20:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

EvgenyTryap,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #43 (permalink)  
Старый 16.02.2017, 20:54
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Возможно кто-нибудь сможет мне помочь!
Есть фиксированный блок(sidebar) к нижней границе. Мне нужно чтоб как только я прокручу до верхней границы футера(footer), фиксированный блок(sidebar) изменил стиль с position:fixed на position: absolute.

<html>
<head>
<style>
.wrapper{height:1500px;
position:relative;}
.footer{background:#F00;
height:300px;}
.sidebar{
height:50px;
position: fixed;
bottom:0;
left:0;
right:0;
background-color: #FF0000;}
</style>

</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>
Ответить с цитированием
  #44 (permalink)  
Старый 16.02.2017, 21:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

футер сдвигающий блок
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>
Ответить с цитированием
  #45 (permalink)  
Старый 16.02.2017, 21:22
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Огромное спасибо!!это то что нужно!!
Ответить с цитированием
  #46 (permalink)  
Старый 08.03.2017, 18:33
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

А возможно ли как-нибудь реализовать тоже самое, но когда у html отключена прокрутка?

<!DOCTYPE html>
<html>
<head>

<style>
html {
position: relative;
height: 100%;
overflow: hidden;
}

body {
position: relative;
height: 100%;
overflow: auto;
}

 .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>
</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>

Последний раз редактировалось EvgenyTryap, 08.03.2017 в 18:35.
Ответить с цитированием
  #47 (permalink)  
Старый 08.03.2017, 19:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

EvgenyTryap,
document.body.addEventListener('scroll'
Ответить с цитированием
  #48 (permalink)  
Старый 08.03.2017, 19:15
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Огромнейшее спасибо!!
Ответить с цитированием
  #49 (permalink)  
Старый 23.08.2017, 17:20
Аспирант
Отправить личное сообщение для JohnJohn Посмотреть профиль Найти все сообщения от JohnJohn
 
Регистрация: 04.06.2017
Сообщений: 46

Сообщение от рони Посмотреть сообщение
Navaho,
и наконец фиксация блока на чистом js улучшенный вариант ...
изменение стилей блока происходит только в момент соединения/разьединения блока с футером
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <style type='text/css'>
  body{padding:0px;margin:0px}
  *{margin:0}
  html,body{height:1000px}
  .wrapper{min-height:100%;height: auto !important;height:100%;margin:0 auto -170px}
  .footer,.push{height:270px}
  .footer{background:#F00}
  .sidebar{
    width:245px;
    margin-top:15px;
    margin-left:400px;
    height:500px;
    padding:13px;
    font-size:14px;
    font-style:  italic;
    font-family: 'Arial';
    border: 2px solid #bab89a;
    position: fixed;
    background-color: #00FF7F;

     }
.sidebar .content .text{
    position: absolute;
}
  </style>
<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.querySelector(".sidebar"),
         b = offset(a),
         f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
         d = a.offsetHeight + parseInt(f.marginTop) || 0,
         e = offset(document.querySelector(".footer"));
     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>
</head>
<body>
<div class="sidebar"></div>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2013</p>
</div>
</body>
</html>
Добрый день, все таки не могу разобраться в этом примере, как победить при уменьшении окна браузера проблему с поведением сайдбара, не понимаю, как сделать так, что бы при размерах видимой части поведение не менялось?
Ответить с цитированием
  #50 (permalink)  
Старый 23.08.2017, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

JohnJohn,
добавить красное
window.onload = window.resize = function () {

Последний раз редактировалось рони, 23.08.2017 в 19:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
Плавающий блок большой ширины sig Элементы интерфейса 1 24.03.2013 22:22