Переместить вниз/вверх фиксированные элементы в HTML

Я работаю над HTML-структурой, что большинство ее страниц построены из двух разделов. первая секция (TopPanel) - это скользящая панель, которая может скользить вниз или вверх (также с jQuery). второй раздел - это Главная страница, которая может содержать любой HTML-документ.Переместить вниз/вверх фиксированные элементы в HTML

<!doctype html> 
<html> 
<head> 
    <!--Meta scripts & more--> 
</head> 
<body> 
<div class="TopPanel"> 
    <!--Panel's Contents--> 
</div> 
<div class="Main"> 
    <!--Some standard HTML docs here--> 
</div> 
</body> 
</html>

Когда TopPanel скользит вниз, все элементы главной секции должен двигаться вниз. Но существует возможность существования элемента position:fixed в разделе Главная. поэтому ясно, что они не будут двигаться, если мы не дадим им margin-top: [$('.TopPanel').height()] px;. Но это не то, что я ухаживаю!

Я ищу способ сдвинуть вниз и сдвинуть все содержимое Главное раздел с плавным эффектом и без изменения всех атрибутов элементов.

источник

2015-05-20 DarkMaze

Вы думаете об использовании CSS transform:translateY(20px) в теге body? Если вы используете фиксированную позицию для другого элемента, это не должно влиять на нее, хотя я ее не тестировал.

После этого вы можете использовать переходы, чтобы получить плавное движение.

body{ 
    padding:10px; 
    overflow:hidden; 
    background:#fff; 
    height:100%; 
    transition:all .2s; 
} 

body.active{ 
    transform: translateY(60px); 
}

Пример:

http://codepen.io/EightArmsHQ/pen/gpwPPo

Lookout для такого рода вещи, хотя: Positions fixed doesn't work when using -webkit-transform

источник

2015-05-20 16:21:57 Djave

Это же Идея: D Должен ли один из нас удалить ответ, так как они оба одинаковы? – ThermalCube

Интересный ответ! но трансформирующее тело заставляет TopPanel также сместиться вниз. как сохранить позицию TopPanel? – DarkMaze

'position: fixed;' и отрицательная высота как 'top' для ** TopPanel ** (например:' top: -200px; ') решили проблему! Thanx – DarkMaze

JSFIDDEL версия
(ОБНОВЛЕНО) Тест:

$('.main').click(function(){ 
 
    $('.main').toggleClass('toggle'); 
 
})

.main{ 
 
    width:20%; 
 
    height: 10%; 
 
    background-color: rgba(100,100,100,0.7); 
 
    text-align: center; 
 
    position: fixed; 
 
    top: 12%; 
 
    transition:all 1.0s 
 
} 
 
.top{ 
 
    width: 20%; 
 
    height: 10%; 
 
    text-align: center; 
 
    background-color: rgba(300,50,50,0.7); 
 
    position: absolute; 
 
} 
 
.toggle{ 
 
    transform: translateY(100px); 
 
    transition:all 1.0s 
 
}

<div class="content"> 
 
    <div class="top"> 
 
     Top 
 
    </div> 
 
    <div class="main"> 
 
     Main 
 
    </div> 
 
</div>

Это потребует некоторой настройки, но оно по-прежнему делает то, что вы ищете.

источник

2015-05-20 16:28:09 ThermalCube

Я думаю, что вы ищете, может быть, это:

Я использовал JQuery UI 1.9.2 для создания тумблер облегчить эффект. Для более я создал Fiddle

JQuery

$("button").click(function(){ 
    $(".topPanel").toggleClass("height", 300); 
    $(".main").toggleClass("top", 300); 
});

CSS

body { margin:0; } 

.topPanel 
{ 
    width:100%; 
    height:50px; 
    background:#333; 
} 

.main 
{ 
    top:50px; 
    bottom:0px; 
    width:100%; 
    position:absolute; 
    background:#ddd; 
} 

.height { height:100px; } 

.top { top:100px; } 

p { font-weight:bold; }

HTML

<div class="topPanel"> 

</div> 
<div class="main"> 
    <center><button>Click Me!</button></center> 
    <p>Hey look at me, i am moving along when you click button!</p> 
</div>

источник

2015-05-20 17:06:04 divy3993

Переместить вниз/вверх фиксированные элементы в HTML

ответ

Смежные вопросы