jQuery

Create Always On Page HTML Elements

A common trend in web design now is to make sure important content is always on screen by making the content move as you scroll down the page.

Many websites can do this with any bit of information they want, some use it for the top navigation, some use this feature to display social media button, some use it to make sure their mail list subscription box in view all the time.

Hongkiat Website

The web design website Hongkiat uses this functionality to always keep the logo, social media share buttons and a search box in view to the visitor. This allows the visitor to always be able to share the current page where ever they are on page. They have the website logo which is a link back to the home page and the search box allows the visitor to always have access to search for a subject anywhere on the page.

The below image is the standard top navigation. hongkiat-top-nav When you scroll the navigation bar changes to this. hongkiat-scroll-nav

Premium Pixels Love It Button

pp-love-it

Premium pixels is a free PSD resource by Orman Clark a graphic designer from UK. Orman makes quality PSDs and gives them away for free on his website premium pixel. On this site he allows people to vote to say if they like the PSD he is offering, by clicking on the love it button.

Premium pixels uses this same always in view functionality on the love it button. As you scroll down the page the love it button will always stay at the top of the screen.

Always In View Social Buttons

When talking about always in view elements you have to talk about social media buttons. Almost every site now has floating social media buttons which will always be in view as you scroll down the screen. They will appear just to the left of the content, this means that people can always share the current page on their favourite social media network anywhere on the page.

For this functionality you can use the WordPress plugin Digg Digg.

diggdigg

With Digg Digg by Buffer, you have an all in one social sharing plugin for your blog. Display all social sharing buttons nicely on your blog and make it look amazing.

You can download this for free by going to WordPress.org.

Digg Digg

Keep In View.js

I stumbled across this Github project called keep-in-view.js which uses a small bit of Javascript to make sure an element is always on the screen.

Keep in view will make sure the elements don't scroll off the page by making them stick to the top or the bottom of the page.

View the project on Github.

Keep in View

In this tutorial we are going to build a small page which will use keep in view to make sure that the navigation bar is always on the screen.

Using Keep In View

To use keepInView it's very simple all you have to do is download the project and include this on the page. But you must make sure that you also include jQuery on the page or it will not work correctly.

After these are included on the page then it's very easy to make any element on the page sticky and always in view.

All you have to do is use the function keepInView on a element.

$("nav").keepInView();

This will make sure that that the element in the nav tag is always in view on the page.

The keepInView function has a number of optional parameters you can use to customise the sticky element.

  • Fixed - Boolean false by default. When set to true this element will be fixed regardless of the scrolling position.
  • edgeOffset - 0 by default. This will by the offset to both the top or the bottom.
  • zIndex - 1 by default. Will override the CSS zindex setting on this element.

Demo Keep In View

In this demo were going to create a simple web page with navigation at the top of the page, this navigation is going to be fixed to top of the page using the keep in view plugin. We are going to create dummy content to make sure that the page is long enough so you can scroll down the page and see the navigation stick to the top of the page.

We are also going to add a subscribe box in a sidebar which we are going to use keepInView.js to make sure that the subscribe box is always on the screen.

The HTML

<article class="content">
        <h1>Too much text</h1>
        <img src="images/Sticky Notes.jpg" class="stickyImages" />
        <p><strong>Resize and scroll the window so that you can see the script keeping elements in view.</strong></p>
        <h4>JavaScript init:</h4>
        <code><pre><script type="text/javascript">
    $(document).ready(function(){
        $(".help").keepInView({fixed:true, zindex: 42, edgeOffset: 30});
        $("nav, footer p").keepInView();
    });
</script>
                </pre></code>
        
        <h2 class=sticky>Sticky Header</h2>
        <p>Trigger the 'unstick' event on the element you no longer want to keep in view.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>And it just keeps on going</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h3> and going and going</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
    
    <aside>
    	<div class="subscribe-box">
    		<h3>Subscribe to stay updated</h3>
    		<p><input type=email placeholder=Enter email address /></p>
    		<p><input type=submit value=Subscribe /></p>
    	</div>
    	
    </aside>
    
        <div style="clear: both; "></div>

Add The Javascript

Keep in view is a jQuery plugin so we need to add both this plugin and jquery to your page.

Save the Keep in view project in the same directory as your project and add the following to the head section of your page.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="keepinview.js"></script>
</head>

With these added to the page we can now use the plugin to keep certain HTML elements in view, add the following Javascript to the page to keep the navigation and subscribe box in view on the page.

<script>
$(document).ready(function(){
        // Keep the navigation in view	
	$("nav").keepInView();

        // Make sure the stick header is always in view with an offset of 40 pixels from the top
	$(".sticky").keepInView({edgeOffset:40});

        // Keep the subscribe box in view 80 pixels from the top with a zIndex of 20
	$(".subscribe-box").keepInView({edgeOffset:80, zIndex:20});	
});
</script>

View the demo page with the elements on the page.

Demo

It's that simple to keep any element on the page in view to your visitors. If you have any important elements you want to keep in view on your web page then you should try using the keepInView.js, which you can download from Github.

Download

Back to top

View Demo

Members Download