Фиксация

Till 05.11.2013 фиксация Все вопросы » Общие вопросы по вёрстке 2757

вопрос

Ребят поскажите вот сайт слева появляеться кнопочка вверх но нормально отображаеться только при разрешениии 1920x1080. Нужно задать фикс что бы при увилечении и уменьшении страницы кнопка оставалась на своем месте и никуда не сдвигалась.

Ответил: Silva

Используйте в стиле кнопки фиксированное позиционирование "position:fixed; left 100px; bottom:100px;

8 комментариев

Юзер

494

Gopr - 2013-11-055 ноября 2013 21:10 - #18733

Ваш код с дописанным id="scrollups"

<div id="scrollup" style="display:block"><b title="Наверх" id="scrollups">Наверх</b></div>

id="scrollup" - Сделайте отступ от левой части экрана до кнопки в 50%, тем самым кнопка будет по центру на всех мониторах.
id="scrollups" - допишите отступ в противоположную сторону, но уже в px, а не в %. Так вы закрепите кнопку относительно центра.

Кнопка прокрутки по дебильному сделана в прицепи... Под один монитор заточена, высоту тоже надо делать в %

Юзер

Till - 2013-11-056 ноября 2013 00:16 - #18738

Вот css пршу помоги

#scrollup{
    position: absolute;
    width:62px;
    top:60px;
    bottom:60px;
    left:135px;
    z-index:2244;
    border-radius:12px;
    background-color:rgba(0,0,0,0);
    transition:background-color 0.3s linear;
    -moz-transition:background-color 0.3s linear;
    -webkit-transition:background-color 0.3s linear;
    -o-transition:background-color 0.3s linear
    cursor:pointer}
#scrollup b{
    position:fixed;
    margin:15px;
    margin-top:620px;
    display:block;
    width:32px;
    height:32px;
    overflow:hidden;
    text-indent:-9999px;
    background:#289ad6 url(http://4.firepic.org/4/images/2013-11/05/ix3gs4afbzb7.png);
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px}
#scrollup:hover{
    background-color:rgba(0,0,0,0.4)}

Юзер

494

Gopr - 2013-11-056 ноября 2013 02:22 - #18739

Замени

<div class="button-up" style=""><div id="scrollup" style="display: block;"><b title="Наверх">Наверх</b></div></div>

на

<div id="scrollup" class="button-up"><b title="Наверх">Наверх</b></div>

.button-up {opacity:0.7;
height:100%;
position:fixed;
width: 62px;
margin-left:-620px;
left:50%;
top:0;
cursor:pointer;
color:rgb(211, 219, 228);
background-image:none;
display:block}

#scrollup {position:absolute;
width:62px;
top:60px;
bottom:60px;
border-radius:12px;
background-color:rgba(0,0,0,0);
transition:background-color 0.3s linear;
-moz-transition:background-color 0.3s linear;
-webkit-transition:background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
cursor:pointer}

#scrollup:hover {background-color:rgba(0,0,0,0.4)}

#scrollup b {margin:15px;
display:block;
width:32px;
height:32px;
text-indent:-9999px;
background:#289ad6 url(http://4.firepic.org/4/images/2013-11/05/ix3gs4afbzb7.png);
border-radius:6px}

Юзер

494

Gopr - 2013-11-056 ноября 2013 02:33 - #18740

Правда если стили прописываются в скрипте прокрутки, то их нужно править там а не в css...

Юзер

Till - 2013-11-056 ноября 2013 16:46 - #18758

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

Юзер

494

Gopr - 2013-11-056 ноября 2013 23:00 - #18770

Не пойму что вам теперь нужно...
Зашел к вам на сайт вот что вижу:
1. Прокручиваю сайт появляется кнопка прокрутки.
2. Навожу курсор на кнопку, она становиться на тон ярче + всплывает подсказка "Наверх".
3. В момент наведения также появляется активный, еле заметный, полупрозрачный, черный блок. Этот полупрозрачный элемент кнопки - кликабельный, что упрощает нажатие по кнопке прокрутке...
4. Кнопка фиксирована по высоте и ширине, черный блок фиксирован по ширине, но динамичен по высоте.
5. Все кликается и прокручивается, кнопка пропадает, после прокручивания до самого верха и заново появляется если снова немного прокрутить сайт. Тоже самое касается и черного блока - "обводки"
6. Ваша просьба:

Нужно задать фикс что бы при увилечении и уменьшении страницы кнопка оставалась на своем месте и никуда не сдвигалась.

Судя по тому что я вижу на данный момент на сайте, кнопка остается на своем месте и никуда не сдвигается.

Юзер

Till - 2013-11-056 ноября 2013 23:20 - #18771

Спасибо, пару строк дописал все тепреь отлично!)

Юзер

Till - 2013-11-056 ноября 2013 11:42 - #18748

Спасибо большое прийду домой проверю.