Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
EvilDoom
0 / 0 / 0
Регистрация: 07.02.2013
Сообщений: 60
#1

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

19.10.2014, 18:09. Просмотров 1655. Ответов 5
Метки нет (Все метки)

Всем привет.
Подскажите как решить такую задачу:
Есть блок
HTML5
1
<div class="stocke2" id="readmore_block"></div>
Он расположен почти в самом низу страницы.

Задача: прилепить его к низу экрана когда он за пределами экрана.
А когда мы страницу скроллим вниз до его места, он бы отлипал от экрана и становился на своё место.
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.10.2014, 18:09
Ответы с готовыми решениями:

Текст к низу блока
как прилепить текст к низу блока варианты с position:absolute не вариант,...

Привязать картинки к низу блока
Привет, форумчане. Появилась следующая проблема: нужно привязать картинки к...

Прижать к низу экрана
Пробую найти ответ, но не знаю как правильно записать в поиске. Мне нужно что...

Прижать div к низу родительского блока
Есть такой html-код: &lt;div id=&quot;mainblock&quot;&gt; &lt;div class=&quot;innerblock&quot;&gt; ...

Фон блока не прижимать к самому низу
Здравствуйте. Показалось, что все просто, но оказалось нет... В общем, между...

5
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
19.10.2014, 19:05 #2
EvilDoom,
1) этого не сделать средствами css/html, тему лучше бы подошла сюда http://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();
    });
});
если не поможет, скиньте всю вашу верстку
1
Давран
199 / 149 / 43
Регистрация: 24.11.2013
Сообщений: 1,104
19.10.2014, 19:22 #3
EvilDoom, а если так
{
position:fixed;
bottom:0;
}
0
EvilDoom
0 / 0 / 0
Регистрация: 07.02.2013
Сообщений: 60
19.10.2014, 21:21  [ТС] #4
Цитата Сообщение от whiteapps Посмотреть сообщение
EvilDoom,
1) этого не сделать средствами css/html, тему лучше бы подошла сюда http://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?
А то со сменой классов наверное гемора много...
0
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
19.10.2014, 21:49 #5
Лучший ответ Сообщение было отмечено EvilDoom как решение

Решение

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();
    });
1
Давран
199 / 149 / 43
Регистрация: 24.11.2013
Сообщений: 1,104
20.10.2014, 21:13 #6
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>
посмотри что не так написал
0
20.10.2014, 21:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.10.2014, 21:13

Прижать блок к низу экрана
Здравствуйте. Вертикальную черную полоску портфолио не могу прижать к низу...

Прижать футер к низу экрана
Как сделать так, чтобы при уменьшении масштаба (отдалении) страницы блок footer...

прижать футер к низу браузера когда нет контента
Привет всем. Как можно прижать футер к низу браузера когда нет контента? Ничего...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru