Прилипание блока к низу экрана, когда его не видно

@EvilDoom · Регистрация: 07.02.2013

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

Всем привет.
Подскажите как решить такую задачу:
Есть блок

HTML5
1
<div class="stocke2" id="readmore_block"></div>

Он расположен почти в самом низу страницы.

Задача: прилепить его к низу экрана когда он за пределами экрана.
А когда мы страницу скроллим вниз до его места, он бы отлипал от экрана и становился на своё место.

@whiteapps · 19.10.2014, 19:05

EvilDoom,
1) этого не сделать средствами css/html, тему лучше бы подошла сюда https://www.cyberforum.ru/javascript/

2) попробуйте так

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
$(function () {
    
    var bH = window.innerHeight;
    var readmoreBlock  = $("#readmore_block");
    var point          = readmoreBlock.offset().top;
    var checkTop = function () {
        var windowTop = $(window).scrollTop();
        if (point > +windowTop + +bH) {
            readmoreBlock.css({
                "position": " fixed",
                "right": " 0",
                "bottom": " 0"
            });
        }else{
            readmoreBlock.css({
                "position": "inherit"
            });
        }
    }
    
    checkTop();
    $(window).on('scroll', function () {
        var windowTop = $(window).scrollTop();
        checkTop();
    });
});

если не поможет, скиньте всю вашу верстку

@Давран · 19.10.2014, 19:22

EvilDoom, а если так
{
position:fixed;
bottom:0;
}

@EvilDoom · 19.10.2014, 21:21 **[ТС]**

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

EvilDoom,
1) этого не сделать средствами css/html, тему лучше бы подошла сюда https://www.cyberforum.ru/javascript/
2) попробуйте так
Код JavaScript
$(function () {
var bH = window.innerHeight;
var readmoreBlock = $("#readmore_block");
var point = readmoreBlock.offset().top;
var checkTop = function () {
var windowTop = $(window).scrollTop();
if (point > +windowTop + +bH) {
readmoreBlock.css({
"position": " fixed",
"right": " 0",
"bottom": " 0"
});
}else{
readmoreBlock.css({
"position": "inherit"
});
}
}
checkTop();
$(window).on('scroll', function () {
var windowTop = $(window).scrollTop();
checkTop();
});
});
если не поможет, скиньте всю вашу верстку

Работает отлично, но я немножко не так разъяснил
Есть блок:

HTML5
1
<div class="stocke" id="readmore_block"></div>

когда я нажимаю на кнопку, блок становится:

HTML5
1
<div class="stocke2" id="readmore_block"></div>

то есть меняет класс
было бы отлично если бы Ваш скрипт менял класс на stocke3 когда он приклеен к экрану, и на stocke2 когда отлипал от экрана
то есть что бы прилипал когда класс у этого блока stocke2, а не stocke

Добавлено через 8 минут
хотя наверное это я слишком закрутил

Возможно как нибудь дописать Ваш скрипт, что бы когда блок прилипнул к экрану то в нем заменить background?
А то со сменой классов наверное гемора много...

@whiteapps · 19.10.2014, 21:49

EvilDoom,

вот так с заменой класса

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function () {
    
    var bH = window.innerHeight;
    var readmoreBlock  = $("#readmore_block");
    var point          = readmoreBlock.offset().top;
    var checkTop = function () {
        var windowTop = $(window).scrollTop();
        if (point > +windowTop + +bH) {
            readmoreBlock.removeClass('stocke').addClass('stocke2');
        }else{
            readmoreBlock.removeClass('stocke2').addClass('stocke');
        }
    }
    
    checkTop();
    $(window).on('scroll', function () {
        var windowTop = $(window).scrollTop();
        checkTop();
    });
});

если просто с заменой background, то так

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
28
$(function () {
    
    var bH = window.innerHeight;
    var readmoreBlock  = $("#readmore_block");
    var point          = readmoreBlock.offset().top;
    var checkTop = function () {
        var windowTop = $(window).scrollTop();
        if (point > +windowTop + +bH) {
            readmoreBlock.css({
                "position": " fixed",
                "right": " 0",
                "bottom": " 0",
                "background": ТУТ ПИШЕМ НУЖНЫЕ CSS СВОЙСТВА ДЛЯ BACKGROUND
            });
        }else{
            readmoreBlock.css({
                "position": "inherit",
                "background": "none"
            });
        }
    }
    
    checkTop();
    $(window).on('scroll', function () {
        var windowTop = $(window).scrollTop();
        checkTop();
    });
});

Добавлено через 21 минуту
EvilDoom,

JavaScript
1
2
3
4
$(window).on('scroll', function () {
        var windowTop = $(window).scrollTop(); // тут эта строка лишняя, можно убрать
        checkTop();
    });

@Давран · 20.10.2014, 21:13

EvilDoom, стало тоже интересно, что ты спросил. Но чуток не получается. Сможешь подправить?

HTML5
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
    <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>Прилипание</title>
    <style type="text/css" media="all">
        .content{
            width: 100%;
            height: 800px;
            background-color: gray;
        }
 
        .stocke2{
            width: 100%;
            height: 150px;
            background-color: blue;
        }
        .stocke{
            width: 100%;
            height: 150px;
            background-color: beige;
        }
 
    </style>
 
 
    <script type="text/javascript" >
        $(function () {
 
            var bH = window.innerHeight;
            var readmoreBlock  = $("#readmore_block");
            var point          = readmoreBlock.offset().top;
            var checkTop = function () {
                var windowTop = $(window).scrollTop();
                if (point > +windowTop + +bH) {
                    readmoreBlock.removeClass('stocke').addClass('stocke2');
                }else{
                    readmoreBlock.removeClass('stocke2').addClass('stocke');
                }
            };
 
            checkTop();
            $(window).on('scroll', function () {
                checkTop();
            });
        });
    </script>
 
</head>
    <body>
        <div class="content"></div>
        <div class="stocke2" id="readmore_block"></div>
    </body>
</html>

посмотри что не так написал

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	19.10.2014, 19:22
	EvilDoom, а если так { position:fixed; bottom:0; } 0

Прилипание блока к низу экрана, когда его не видно

Решение