Зафиксировать блок при прокрутке
Здравствуйте!
Сильно не пинайте, пожалуйста! Подобных тем много. Как фиксировать - понятно! Заморочка в том, что блок который нужно зафиксировать при прокрутке находится по центру экрана. И при фиксировании отскакивает на высоту margin. Помогите, пожалуйста, избавиться от этого скачка! Скрипт |
Исправь
toplogo_pos = ($('#top_logo').position().top + parseInt($('#top_logo').css('margin-top')));
Кстати создавать переменные без объявления var не очень хорошая идея |
destus,
а проще сможешь? |
Цитата:
|
destus,
нужно получить тор элемента в документе, для этого в jquery есть специальный метод. :-? |
Цитата:
|
destus,
зато мучатся с отступами ненадо и наверняка html в реальности будет как лабиринт https://jsfiddle.net/qbnw4wnz/2/ |
Работает идеально!!!!!!!!!!!!!:thanks:
Спасибо огромное! Если не затруднит, подскажите, что тут не так со скриптом? Нужно чтобы блок исчезал при прокрутке вниз и появлялся при прокрутке вверх. Но сейчас поведение у блока совсем не понятное. Скрипт брал тут p.s. не получается поставить + в карму рони. сайт пишет "вы должны добавить отзыв кому-то еще, предже чем сможете снова добавить его рони." Поставил + в карму destus. Пытаюсь снова добавить рони, но алерт сайта тот-же |
блок исчезал при прокрутке вниз и появлялся при прокрутке вверх
Tord002,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<style type="text/css">
.top_logo {
position: absolute;
width: 150px;
height: 132px;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -66px;
background-color:#c2151a;
}
</style>
<title></title>
<script>
jQuery(function(f){
var element = f('#top_logo');
f(window).scroll(function(){ f('p').text(f(this).scrollTop())
if(f(this).scrollTop() < 200 && element.is(':hidden')) element.fadeIn(500)
else if(f(this).scrollTop() > 200 && element.is(':visible')) element.fadeOut(500)
});
});
</script>
</head>
<body>
<p style="width: 100%; height: 15px; position: fixed; top : 200px"></p>
<div style="height:100%">
<div id="top_logo" class="top_logo"></div>
</div>
<div style="min-height:1000px"></div>
</body>
</html>
|
УРА! :dance:
СПАСИБО! ОГРОМНОЕ!:thanks: рони, Вы очень помогли! ОЧЕНЬ БЛАГОДАРЕН!:thanks: |
| Часовой пояс GMT +3, время: 12:03. |