Форум

Tord002 · #1 (**permalink**) 16.02.2016, 19:06

Здравствуйте!
Сильно не пинайте, пожалуйста!
Подобных тем много. Как фиксировать - понятно!
Заморочка в том, что блок который нужно зафиксировать при прокрутке находится по центру экрана. И при фиксировании отскакивает на высоту margin.
Помогите, пожалуйста, избавиться от этого скачка!
Скрипт

destus · #2 (**permalink**) 16.02.2016, 19:35

Исправь

toplogo_pos = ($('#top_logo').position().top + parseInt($('#top_logo').css('margin-top')));

Кстати создавать переменные без объявления var не очень хорошая идея

рони · #3 (**permalink**) 16.02.2016, 20:00

destus,
а проще сможешь?

destus · #4 (**permalink**) 16.02.2016, 20:08

Сообщение от рони

destus,
а проще сможешь?

Неа, расскажи.

рони · #5 (**permalink**) 16.02.2016, 20:32

destus,
нужно получить тор элемента в документе, для этого в jquery есть специальный метод.

destus · #6 (**permalink**) 16.02.2016, 20:36

Сообщение от рони

destus,
нужно получить тор элемента в документе, для этого в jquery есть специальный метод.

offset? Ну так ведь в этом примере position тоже относительно документа будет...

рони · #7 (**permalink**) 16.02.2016, 20:55

destus,
зато мучатся с отступами ненадо и наверняка html в реальности будет как лабиринт https://jsfiddle.net/qbnw4wnz/2/

Tord002 · #8 (**permalink**) 16.02.2016, 22:03

Работает идеально!!!!!!!!!!!!!

Спасибо огромное!
Если не затруднит, подскажите, что тут не так со скриптом?
Нужно чтобы блок исчезал при прокрутке вниз и появлялся при прокрутке вверх. Но сейчас поведение у блока совсем не понятное.
Скрипт брал тут
p.s. не получается поставить + в карму рони. сайт пишет "вы должны добавить отзыв кому-то еще, предже чем сможете снова добавить его рони." Поставил + в карму destus. Пытаюсь снова добавить рони, но алерт сайта тот-же

рони · #9 (**permalink**) 16.02.2016, 22:38

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>

Tord002 · #10 (**permalink**) 16.02.2016, 23:52

УРА!

СПАСИБО! ОГРОМНОЕ!

рони, Вы очень помогли!
ОЧЕНЬ БЛАГОДАРЕН!

Форум

Справочник

Discord чат

Курсы javascript