Collapsing div element on scroll

[tomaszjot]

I would like to achieve similar effect to this one --> Web Design Andover, Hampshire from Website Design Agency FHOKE

I went through some script but don't know how to implement it. I don't need WP plugin, rather tutorial which shows how to create something similar.

Any help appreciated. Thanks.

 

[mattseh]

Ok, so I think Ifigured it out.

The <header> element's class is changing from "header" to "header brdr", compare the css differences.

In scripts.js, this code is responsible:

jQuery(window).scroll( function() {
      var value = $(this).scrollTop();
      if ( value > 100 )
          jQuery("header.header").addClass("brdr");
      else
          jQuery("header.header").removeClass("brdr"); 
      });

This goes within the

jQuery(document).ready(function($) {

block.

Suck it dchuk, we frontend now.

 

[tomaszjot]

Ok, so I think Ifigured it out.

The <header> element's class is changing from "header" to "header brdr", compare the css differences.

In scripts.js, this code is responsible:

jQuery(window).scroll( function() {
      var value = $(this).scrollTop();
      if ( value > 100 )
          jQuery("header.header").addClass("brdr");
      else
          jQuery("header.header").removeClass("brdr"); 
      });

This goes within the

jQuery(document).ready(function($) {

block.

Suck it dchuk, we frontend now.

I can see you know your HTML. Thanks.

 

[Fatbat]

You don't need anything quite so complicated for that effect. It's simply a fixed position background with the rest of the site scrolling over the top of it.

Now if you want to do something a little fancier, you could do some parallax scrolling which is all the rage right now and for that you would use one of the popular parallax scrolling jQeury scripts like...

Stellar.js (https://github.com/markdalgleish/stellar.js)

or

skrollr - parallax scrolling for the masses

Some examples of parallax scrolling sites...

30 Great Websites with Parallax Scrolling

28 amazing parallax scrolling sites | Webdesigner Depot

 

[Fatbat]

Here's another site with a similar effect as the OP...

Web Design + Development Company | Night Owl Interactive

 

[Fatbat]

Here's another one...

layouthemes | Responsive Web Design Templates - HTML5 and CSS3

The cool thing about this site is that the first picture is 100% of the screen height, which also happens to be a lot like this site...

https://yourkarma.com/

except the second one doesn't have the "collapsing" effect. It just scrolls normally (although scroll down for a cool animation effect on the product).

The first link is also demonstrating the popular one page website format that is prevalent these days where clicking on various links takes you to a different place on the page.