Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #61 (permalink)  
Старый 16.09.2018, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

j0hnik,
давай подождём макета
Ответить с цитированием
  #62 (permalink)  
Старый 16.09.2018, 19:10
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Сообщение от рони Посмотреть сообщение
EvgenyTryap,
сделайте минимальный макет, иначе можно только гадать.
<!DOCTYPE html>
<html>
 <head>
 <style>
 html *{
   margin:0;
   padding:0;
 }
.block{
height: 500px;
}

#content{
height: 1500px;
overflow-y: 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>
   <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="block">
<div id="content">
 <div class="wrapper">
 <p>Your website content here.</p>
 <div class="sidebar">fixed block</div>
 </div>
 <div class="footer">
 <p>footer text</p>
 </div>
</div>
</div>

 </body>
 </html>

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

Последний раз редактировалось EvgenyTryap, 16.09.2018 в 20:02.
Ответить с цитированием
  #63 (permalink)  
Старый 16.09.2018, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

EvgenyTryap,
не знаю, как это реализовать, плохо знаю css, чтоб сделать фиксированный блок в блоке.
Ответить с цитированием
  #64 (permalink)  
Старый 16.09.2018, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

EvgenyTryap,
ниже это не решение, это танцы с бубном ... макет того что требуется сделать, насколько я вас понял.
<!DOCTYPE html>
<html>
<head>
<style>
html *{
margin:0;
padding:0
}
.block{
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 600px;
    margin: 30px auto
}

#content  {
height: 300px;
position: relative;
background-color: #D3D3D3;
overflow-y:  auto;
overflow-x: hidden;

}
.wrapper{
height: 1500px;
}

.footer{
background-color: #8B4513;
height:300px;
border-top: rgb(255, 255, 0) 1px  dashed;
}
.sidebar{
height:50px;
position: absolute;
top : 250px;
width: 100%;
background-color:#FF0000;
 z-index: 100;
}

</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var footer = document.querySelector('.footer'),
sidebar = document.querySelector('.sidebar'),
content = document.querySelector('#content'),
topFooter = footer.offsetTop, height = content.clientHeight,
heightsidebar = sidebar.clientHeight;
content.addEventListener('scroll', function() {
var scroll = content.scrollTop + height;
var topSidebar = "0";
var position = "relative";
if(topFooter > scroll ){
   topSidebar = (scroll - heightsidebar)+ "px";
   position = "absolute"
}
 sidebar.style.top = topSidebar;
 sidebar.style.position = position;
});
});
</script>
</head>
<body>
<div class="block">

<div id="content">

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

</div>
</body>
</html>
Ответить с цитированием
  #65 (permalink)  
Старый 16.09.2018, 21:17
Интересующийся
Отправить личное сообщение для EvgenyTryap Посмотреть профиль Найти все сообщения от EvgenyTryap
 
Регистрация: 19.09.2014
Сообщений: 19

Да, именно это я и пытался сделать!)
Ответить с цитированием
  #66 (permalink)  
Старый 16.09.2018, 22:53
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 382

рони, применил position: sticky; к вашему коду

<!DOCTYPE html>
<html>
	<head>
		<style>
html * {
	margin: 0;
	padding: 0;
}
.block {
	height: 300px;
	width: 600px;
	margin: 30px auto;
}

#content {
	height: 300px;
	overflow: auto;
	background-color: #D3D3D3;
}
.wrapper {
	height: 1500px;
}

footer {
	background-color: #8B4513;
	height: 300px;
	border-top: 1px dashed yellow;
}
.sidebar {
	height: 50px;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	bottom: 0;
	background-color: red;
}

		</style>
	</head>
	<body>
		<div class="block">
			<div id="content">
				<div class="wrapper">
					<p>Your website content here.</p>
				</div>
				<div class="sidebar">fixed block</div>
				<footer>
					<p>footer text</p>
				</footer>
			</div>
		</div>
	</body>
</html>


Поддержка браузерами очень хорошая caniuse.com/#feat=css-sticky, в супер старых браузерах содержимое всё-равно остаётся доступным

UPD Если нужно, чтобы блок был именно так как с position: sticky? то можно примерно так эмулировать...
<!DOCTYPE html>
<html>
	<head>
		<style>
html * {
	margin: 0;
	padding: 0;
}
.block {
	height: 300px;
	width: 600px;
	margin: 30px auto;
}

#content {
	height: 300px;
	overflow: auto;
	background-color: #D3D3D3;
}
.wrapper {
	height: 250px;
	overflow: auto;
}

footer {
	background-color: #8B4513;
	height: 300px;
	border-top: 1px dashed yellow;
}
.sidebar {
	height: 50px;
	bottom: 0;
	background-color: red;
}
@supports(position: sticky) {
	.wrapper {
		height: auto;
	}

	.sidebar {
		position: sticky;
	}
}

		</style>
	</head>
	<body>
		<div class="block">
			<div id="content">
				<div class="wrapper">
					<p style="padding-bottom: 1500px;">
						Пусть содержимое длинное...
						Your website content here.
					</p>
				</div>
				<div class="sidebar">fixed block</div>
				<footer>
					<p>footer text</p>
				</footer>
			</div>
		</div>
	</body>
</html>

Последний раз редактировалось Malleys, 16.09.2018 в 23:29.
Ответить с цитированием
  #67 (permalink)  
Старый 16.09.2018, 23:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

Malleys,
рассматривал этот вариант, в ie не работает, может есть правильная эмуляция (position: sticky или полифил какой для ie?
Ответить с цитированием
  #68 (permalink)  
Старый 17.09.2018, 10:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

Сообщение от Malleys
UPD
ок, надо подумать, а реально сделать фиксированный блок в блоке, или position:fixed "выносит" фиксированный блок из блока и нет вариантов?
Ответить с цитированием
  #69 (permalink)  
Старый 14.10.2018, 13:49
Новичок на форуме
Отправить личное сообщение для olifus Посмотреть профиль Найти все сообщения от olifus
 
Регистрация: 06.02.2016
Сообщений: 9

Здравствуйте.
Как убрать дергание/мигание плавающего блока при прокрутке страницы?

$(window).scroll(function() {
		var sb_m = 50; /* отступ сверху и снизу */
		var mb = 200; /* высота подвала с запасом */
		var st = $(window).scrollTop();
		var sb = $(".sticky-block");
		if (sb.length === 0) return;
		var sbi = $(".sticky-block .inner");
		var sb_ot = sb.offset().top;
		var sbi_ot = sbi.offset().top;
		var sb_h = sb.height();

		if (sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
			if (st > sb_ot) {
				var h = Math.round(st - sb_ot) + sb_m;
				sb.css({
					"paddingTop": h
				});
			} else {
				sb.css({
					"paddingTop": 0
				});
			}
		}
	});
Ответить с цитированием
Ответ



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

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


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