Question

Добрый день!

Как сделать, чтобы блок слева стоял на месте, и опускался вместе с текстом во время прокрутки страницы, а не дергался, как сейчас. Пример здесь: http://ourstranstvia.ru/index/proba/0-92

А надо, чтобы было, как здесь http://www.blogoitaliano.com/planirovanie-poezdki/transport-v-italii/kak-dobratsya-do-rima-iz-aeroporta-fyumichino.html

css такой:

 .fixed {
 position: fixed;
 top: 10px; /*здесь указываем отступ сверху*/
 }

script:

<script type="text/javascript">
$(document).ready(function () {
var offset = $("#fixed").offset();
var topPadding = 30,
bottomPadding = 120; //высота над которой остоновится
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#fixed").stop().animate({
marginTop: 0
});
};
});
});
</script>

Спасибо!

Answer 1

Как подобное реализуется, читаем в материале - здесь. Пример - 2, это именно то, что вам нужно.

Comments

Спасибо за ответ! Но, как раз пункт 2 - минимум пояснений, т.е. совсем непонятно, что и где я должна зафиксировать, кроме как прописать в CSS 

 aside1 {  /* селектор блока, который будет оставаться на месте */   position: fixed;   z-index: 101; }

Вопросы:

а) что такое aside1, что мне включать в этот класс? 

Б) script, который я вешала в своем вопросе - убирать или оставлять?

---

Ourstranstvia.ru,

Делается очень просто, если читать внимально материал, делаем примерно так, завертываем блок который должен плавать в подобный код:

<div id="bloks">здесь код блока</div>

в стили пишем:

#bloks {
  position: fixed;
  z-index: 101;
  width: ширина блокаpx;
top: 600px;
}

600 регулируем на сколько вам нужно опустить блок чтобы он корректно отображался где положено.

---

Yuri_Geruk,

Завернула блок:

<div id="bloks">
<DIV class=blocktitle><!-- <bt> -->АРЕНДА ЖИЛЬЯ<!-- </bt> --></DIV>
....

<DIV class=blocktitle><!-- <bt> -->ПОИСК АВИАБИЛЕТОВ<!-- </bt> --></DIV>
....
<script type="text/javascript">
$(document).ready(function () {
var offset = $("#fixed").offset();
var topPadding = 30,
bottomPadding = 120; //высота над которой остоновится
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) $("#fixed").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#fixed").stop().animate({
marginTop: 0
});
};
});
});
</script></DIV>

В стили скопировала 

#bloks {
  position: fixed;
  z-index: 101;
  width: 200px;
top: 600px;
}

Блок вообще остался на месте, не двигается с прокруткой страницы: http://ourstranstvia.ru/index/proba/0-92

 

 

---

Ourstranstvia.ru,

Да, это плохое решение, проверил все, нашел лучшее и проверил все замечательно работает, читаем пост - здесь.