Перемещение блока текста при скролле страницы

@xunicorn · Регистрация: 22.11.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте. Собственно сабж. Мне нужно, чтобы блок ссылок в сайдбаре опускался вместе со скроллингом.
У меня есть код кнопки "Наверх" которая возникает, при скролле вниз, и я добавил в этот код еще одну функцию, но результата никакого: кнопка - работает, блок ссылок стоит на месте.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(document).ready(function(){
  //Высота окна браузера
  var HeightScreen = $(window).height();
 
  //Положение кнопки на странице
  $("#buttonUp").css({"bottom":"10px","left":"10px"});
  $("#scrollBlock").css({"top":"10px"});
 
  //Функция срабатывает при скроллинге страницы
  $(window).scroll(function () {
    /*
    Если расстояние от начала страницы до текущего расположения
    документа превышает высоту окна браузера, то отображать кнопку
    вверх, иначе скрывать.
    */
    if (HeightScreen<$(document).scrollTop()){
      if ($("#buttonUp").css("display")=="none"){
        $("#buttonUp").fadeIn("slow");
      }
    }else{
      if ($("#buttonUp").css("display")=="block"){
        $("#buttonUp").fadeOut("slow");
      }
    }
    $("#scrollBlock").animate({top:"+=150px"}, 2000);
  });
});

Можете подкинуть идеи, или рассказать что не так, или дать почитать.

@Soldado · 10.12.2012, 16:53

А если без скриптов для блока ссылок:

CSS
1
position:fixed;

@xunicorn · 10.12.2012, 17:00 **[ТС]**

не, не пойдет. Нужно именно чтобы блок "плавал" в определенной позиции страницы

@Soldado · 10.12.2012, 18:01

Почему нет?
Задавайте, например:

CSS
1
2
3
position: fixed;
    top:120px;
    left:20px;

И блок будет плавать в заданной позиции. Вот демонстрация (красному блоку как раз и заданы приведённые выше стилевые свойства)

@xunicorn · 10.12.2012, 18:36 **[ТС]**

спасибо за совет, на первых порах подойдет

@Poluk · 23.12.2021, 11:53

Если задачу еще не реализовал, то попробуй вот так, я у себя делала:

HTML5
1
<div id="upbutton"></div>

CSS
1
2
3
4
5
6
7
8
9
#upbutton {
    background: url("твое_изображение_стрелки.png") no-repeat top left;
    height: 100px;
    width: 100px;   
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 9;
  }

JavaScript
1
2
3
4
5
6
7
8
9
10
$(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            if ($('#upbutton').is(':hidden')) {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { $('#upbutton').stop(true, false).fadeOut('fast'); }
    });
    $('#upbutton').click(function() {
        $('html, body').stop().animate({scrollTop : 0}, 300);
    });

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@xunicorn 3 / 3 / 0 Регистрация: 22.11.2011 Сообщений: 121
	10.12.2012, 17:00 [ТС]
	не, не пойдет. Нужно именно чтобы блок "плавал" в определенной позиции страницы 0

@xunicorn 3 / 3 / 0 Регистрация: 22.11.2011 Сообщений: 121
	10.12.2012, 18:36 [ТС]
	спасибо за совет, на первых порах подойдет 0