Css fixed position transition

CSS Transition with fixed position from right to left

The following tutorial shows you how to use CSS to do «CSS Transition with fixed position from right to left».

CSS Style

The CSS style to do «CSS Transition with fixed position from right to left» is

.side-menu !-- w w w . d e m o 2 s . c o m --> z-index:999; overflow:hidden; position:fixed; top:25%; right:0; > .side-menu li < cursor:pointer; display:block; list-style-type:none; width:40px; height:40px; overflow:hidden; position:relative; transition:width 0.5s; margin-left:auto; > .side-menu li a < position:relative; text-decoration:none; color:#FFFFFF; > .ask-questions < background:#19b5fe; > .ask-questions:hover < width:150px; > .facebook-link < background:#3b5998; > .facebook-link:hover < width:150px; > .support-box < background:#dd4b39; > .support-box:hover < width:150px; >

HTML Body

body> div >"side-menu"> ul> li >"ask-questions">a href="#">img src="/img/front/question.png" alt="" width="40" height="40">span>Questions   li >"facebook-link">a href="#">img src="/img/front/facebook.png" alt="" width="40" height="40">span>Facebook   li >"support-box">a href="#">img src="/img/front/support.png" alt="" width="40" height="40">span>Support      

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .side-menu < z-index: 999;!-- w ww . d e m o 2 s .c om --> overflow: hidden; position: fixed; top: 25%; right: 0; > .side-menu li< cursor: pointer; display: block; list-style-type: none; width: 40px; height: 40px; overflow: hidden; position: relative; transition: width 0.5s; margin-left:auto; > .side-menu li a< position: relative; text-decoration: none; color: #FFFFFF; > .ask-questions < background: #19b5fe; > .ask-questions:hover< width: 150px; > .facebook-link < background: #3b5998; > .facebook-link:hover< width: 150px; > .support-box< background: #dd4b39; > .support-box:hover< width: 150px; >  body> div >"side-menu"> ul> li >"ask-questions">a href="#">img src="/img/front/question.png" alt="" width="40" height="40">span>Questions   li >"facebook-link">a href="#">img src="/img/front/facebook.png" alt="" width="40" height="40">span>Facebook   li >"support-box">a href="#">img src="/img/front/support.png" alt="" width="40" height="40">span>Support       

Related

• CSS transition: width Change direction
• CSS Transition width on mouseout for pseudo before element
• CSS transition with css3
• CSS Transition with fixed position from right to left
• CSS Transition with this.src=image1.src; on a onmouseover in html
• CSS Transition with this.src=image1.src; on a onmouseover in html (Demo 2)
• CSS Transition works in Firefox but not in webkit browser

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

CSS Transition Position Fixed Animation Effect

In this tutorial, we will learn how to apply a CSS transition effect to an element when its fixed position is moved on the page.

Just for reference the end result will work something along these lines:

The HTML

The HTML for this simple example will be a box with a nested element. When the outer element is clicked the position of the inner item will change using a transition effect.

div id="box"> div class="inner-box">div> div> 

Toggle an Active Class with JavaScript

To move the element we will look for a click event on it, then toggle an active class with different positioning rules.

var box = document.getElementById('box'); box.addEventListener('click', function()  if (box.classList.contains('box-active'))  box.classList.remove('box-active'); > else  box.classList.add('box-active'); > >); 

Here is a jQuery variant of the same function:

$('#box').click(function()  $('#box').toggleClass('box-active'); >); 

The CSS

The CSS will position the inner-box element absolutely outside of the parent element to the left. When .box-active is added a new position: left rule is applied with a transition linear effect lasting 2 seconds.

#box  position: relative; overflow: hidden; width: 600px; height: 400px; > .inner-box  position: absolute; left: -100px; top: 100px; width: 100px; height: 100px; background: red; > .box-active .inner-box  left: 100px; transition: left 0.2s linear; > 

Источник

Perfectly smooth transition between fixed and variable positioning of HTML elements using CSS and Javascript

The last couple of days I have been working on a new webpage. In doing so, I wanted to create a design where the menu bar initially resides at the bottom of the page and moves upwards as the user scrolls down. However, once the menu bar hits the top edge of the viewport, it should remain fixed there. A bit of googling quickly revealed a solution for this problem, using a combination of CSS and Javascript. However, I wasn’t happy with the solution, because it created a visible jump in the layout every time the menu bar hit the top edge of the screen. In fact, this jump is quite common among most web pages that use this design trick. For example, check out a profile page on Google Scholar: As you scroll down, the heading above the publication list stays fixed as soon as it hits the top edge of the screen. And if you scroll slowly, you’ll see that the layout jumps the moment the element hits the top edge. I didn’t like this effect at all, so I devised a way to work around it.

Let’s first discuss how we implement this kind of effect in general. They key idea is to use a little bit of Javascript to monitor where on the screen the element of interest resides. The moment it hits the top edge of the viewport, we set it’s position property to fixed so it can’t move any further. If we scroll back down, we revert the setting so the element can move downwards again.

The following code will generate this effect:
HTML:

(The content-anchor id is needed so the Javascript code can monitor where the sticky element should be on the page relative to the rest of the document. See the code below.)

Javascript (using the jQuery framework):

function sticky_relocate() < var window_top = $(window).scrollTop(); var div_top = $('#content-anchor').offset().top; if (window_top >div_top) < $('#sticky').addClass('stick'); >else < $('#sticky').removeClass('stick'); >> $(function () < $(window).scroll(sticky_relocate); sticky_relocate(); >);

You can check out a working example of this idea here. What you will notice, if you scroll slowly, is that just as the sticky element hits the top edge of the viewport, the bottom element (“Main document”) jumps upwards. In fact, at the moment at which the sticky property is turned on, the sticky element covers most of the heading of the main document. This is exactly the same effect that you can see on the Google Scholar page and on countless other pages around the web.

What is going on here? What is happening is that as the sticky property is turned on, the sticky box is removed from the layout and displayed on top of the rest of the document. Hence, the height of that box is now missing from the layout, causing the visible jump. The solution is simple, of course: As we take out an element from the layout, we need to insert an alternative one of exactly the same size. The simple solution is to add a copy of the sticky element that we can show or hide as needed. The corresponding code looks as follows:

#sticky < >#sticky-phantom < visibility: hidden; >#sticky.stick

function sticky_relocate() < var window_top = $(window).scrollTop(); var div_top = $('#content-anchor').offset().top; if (window_top >div_top) < $('#sticky').addClass('stick'); $('#sticky-phantom').show(); >else < $('#sticky').removeClass('stick'); $('#sticky-phantom').hide(); >> $(function () < $(window).scroll(sticky_relocate); sticky_relocate(); >);

I have provided a working implementation of this idea here. As you can see, in this example the layout doesn’t jump at all. The scrolling is smooth the whole time.

This is such a simple trick that I’m surprised it is not used more often. Maybe now that I have posted it here, more people will use it, and we’ll see fewer jarring layout jumps.

Источник

How to Create Fixed Positioning with CSS and JS On Scroll

In a number of development projects, you will want to create some variety of fixed position elements that follow the user as they scroll down the page. This type of design opens up a variety of UI/UX possibilities. It gives additional navigational options for your users to crafting attractive call-to-actions that can spur user engagement. While it’s recommended to limit the use of fixed elements, their strategic use can have wide-ranging positive effects including increased conversions, decreased bounce rates, and better content engagement.

With most fixed position elements, however, the case is largely the same: the way an element appears on load is how it generally will appear as a user scrolls. Because of this general approach, some fixed elements become unfeasible with respective to their overall design. That being said, there’s no rule that says you can’t show a given element in different ways as the user scrolls.

Take the Solodev homepage for example. We have some lovely boxes that appear below the main hero image. These boxes provide quick access to popular pages. As you scroll down the page, you will see that similar boxes will pull from the left side of the screen. It may shock some to find that these two component are dictated by the same underyling HTML. With some crafty JavaScript and CSS, we can change how the element is displayed depending on the user’s view and scroll position.

Quick note: This tutorial is optimized for desktop users. Mobile fans, try giving this a look on your laptop or desktop computer for the full experience.

Here’s the HTML, CSS, and JS needed to create something similar:

HTML

The general HTML markup for the given section can be found below:

The important component here are the main ID «#home-boxes» and the subsequent class «home-boxes». We will target these elements with JS so as to add additional classes depending on the scroll position of a given user. Through the use of the generic «box» and the specific «box1» classes, you can customize the individual boxes to be unique.

CSS

The real meat of the CSS can be found below:

As you can see, the class «home-boxes-left» is fixed. This is what will appear on the left-side of the screen for users as they scroll. We will append this class using some nifty JS that calculates the scroll of a user. We also include some transition affects so the fixed position can «slide» in from the left, rather than simply abruptly showing.

JavaScript

The real magic to all of this can be found in the JavaScript:

There are a few things of note here. First, though the «threshold» variable, we’re essentially saying that the fixed position element should not slide out until the user has scrolled past a certain point. This will prevent the fixed position element, and its non fixed alternative, from showing at the same time. We then go on to say that if the user has scrolled past this threshold point, then add the class «home-boxes-left». If the user scrolls back to within the threshold point, then remove the class «home-boxes-left».

And there you have it. All of the above code and styling will come together to created a truly unique fixed position element. This approach also gives you created flexibility in how you present such elements dependinng on whatever conditions you define. Take a look below at the working code sample and see how everything interacts with one another.

Источник