Вход

Просмотр полной версии : Изменения при достижении конца страницы! Код прикрепляю

Danilkin500
11.12.2016, 21:14
Всем привет! Подскажите пожалуйста (в серпе не нашел), такого либо не запрашиваю, либо я один задался вопросом.

Есть скрипт, который позволяет делать движухи проскролив 100 точек от верха.

Как, подскажите как сделать так, чтобы движуха была при остатке до конца страницы 100. То есть не пролистав от верха страницы 100, а когда осталось листать до конца страницы 100 точек.

Вот код:

<script>
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top > 100) $('.floating').addClass('fixed');
else $('.floating').removeClass('fixed');
});
});
</script>


Заранее спасибо всем спецам!
рони
11.12.2016, 21:40
Danilkin500,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.floating.fixed {
position: fixed;
top: 50px;
}
body{
height: 2000px;
}
.floating{
position: relative;
background-color: #FF0000;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop() + $(window).height()+ 100;
if (top > $(document).height()) $('.floating').removeClass('fixed');
else $('.floating').addClass('fixed');
});
});
</script>

</head>

<body>
<div class="floating fixed">123</div>

</body>
</html>
Danilkin500
12.12.2016, 10:30
Спасибо! Вы очень помогли. Решение работает!
Danilkin500
12.12.2016, 10:44
правда при приближении к концу страницы блок мерцает как лапочка на елке. вроде все как надо, но мигание перечеркивает все
Danilkin500
12.12.2016, 10:48
Что вообще мне нужно? Мне нужно сделать чтобы форма для комментирования была плавающей до тех пор, пока она не приблизится до места своего законного нахождения (cms wordpress).

Этот вариант работает, блок фиксируется, а при приближении перескакивает на свое место, но все это происходит с ярым миганием, а иногда блок почему то зависает, а страница не пролистывается до конца, показав только половину формы для комментирования.
DivMan
12.12.2016, 10:50
Выложить весь код
Danilkin500
12.12.2016, 10:57
все ясно. все это происходит, когда нет четко заданной высоты body
я это убрал:

body{
height: 2000px;
}

И после началось мигание и зависание.
Но когда прописал, то все ровно стало двигаться. Но вы ведь понимаете, что у страниц высота всегда разная. Как тут быть?
Danilkin500
12.12.2016, 11:09
у меня пустой шаблон. тут скачал _http://dontforget.pro/wordpress/chistyiy-shablon-wordpress-dlya-razrabotki-2-0/

там ничего нет, чтобы могло мешать
рони
12.12.2016, 11:19
Danilkin500,
не осилил ваши тексты, но может это чем поможет.
http://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html
Danilkin500
12.12.2016, 11:22
Danilkin500,
не осилил ваши тексты, но может это чем поможет.
http://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html

Осиливать там ничего не нужно) вот самое важное... Не могу с этим разобраться.


все ясно. все это происходит, когда нет четко заданной высоты body
я это убрал:

body{
height: 2000px;
}


И после началось мигание и зависание.
Но когда прописал, то все ровно стало двигаться. Но вы ведь понимаете, что у страниц высота всегда разная. Как тут быть?
Danilkin500
12.12.2016, 11:26
Danilkin500,
не осилил ваши тексты, но может это чем поможет.
http://javascript.ru/forum/dom-window/43757-plavayushhijj-blok-zamirayushhijj-nad-futerom.html

это к сожалению не подходит. Мне нужно чтобы форма не достигая определенного расстояния до нижнего края страницы превращалась из плавающей в фиксированную.
Danilkin500
12.12.2016, 13:57
или направьте куда копать
рони
12.12.2016, 14:35
Danilkin500,
попробуйте сделать макет, или самостоятельно добавить какое условие для ограничения мигания (сам скролл это множество срабатываний, а не одно)
Danilkin500
12.12.2016, 22:56
Danilkin500,
попробуйте сделать макет, или самостоятельно добавить какое условие для ограничения мигания (сам скролл это множество срабатываний, а не одно)

нарисовать как это должно быть? или что-то другое имеете ввиду?
рони
12.12.2016, 23:07
или что-то другое
смотрите пост №2 , тоже самое только с вашими html и css (но ничего лишнего)