Shift down / up position fixed elements in HTML

Question

I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.

<!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>

When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!

I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.

You can then use transitions to get the smooth movement you are after.

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

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

Example:

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

Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform

edited May 23 '17 at 11:44

Community

1
1

answered May 20 '15 at 16:21

Djave

8,595
8
70
124

Same idea :D Should one of us remove the answer since they are both the same? – ThermalCube May 20 '15 at 16:29
Interesting answer! but transforming body cause TopPanel shifting down as well. how to keep TopPanel position? – DarkMaze May 20 '15 at 16:35
`position: fixed;` and negative height as `top` for **TopPanel** (for example: `top: -200px;`) solved the problem! thanx – DarkMaze May 20 '15 at 17:16

ThermalCube · Answer 2 · 2015-05-20T16:56:55.763

JSFIDDEL version
(UPDATED) Try this:

$('.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>

It would need some tweaking but it still does what you are looking for.

score 0 · Answer 3 · answered May 20 '15 at 17:06

I think you are looking for is maybe this:

I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the 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>

Shift down / up position fixed elements in HTML

3 Answers3