Title: How to do this effect?
Last modified: August 30, 2016

---

# How to do this effect?

 *  Resolved [masheen](https://wordpress.org/support/users/masheen/)
 * (@masheen)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/)
 * Hi every body, plz help me. How to do this effect opacity when page scroll down
   
   [http://hkar.ru/FmbY](http://hkar.ru/FmbY) [http://xn—-7sbaabjtzyv6awe8k.xn--p1ai/](http://xn—-7sbaabjtzyv6awe8k.xn--p1ai/)

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Tahoerock](https://wordpress.org/support/users/tahoerock/)
 * (@tahoerock)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6817969)
 * Hi masheen
    It would be a lot of to change on your theme, Your Theme is Zerif
   Lite, and theme you like is Sydney, Best way would be to switch to Sydney Theme,
   which has this properties like Fixed Menu z-index Easing and scrolling run by
   java script and so on…….
 * …and you have 2 menues , which is another obstacle
 * HERE IS A SAMPLE CSS CODE THAT IS SUPPORTING THESE PROPERTIES:
 *     ```
       .site-header {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           background-color: red;
           padding: 20px 0;
           -webkit-transition: all 0.3s ease-out;
           -moz-transition: all 0.3s ease-out;
           -ms-transition: all 0.3s ease-out;
           -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
       }
   
       .site-header.fixed {
           position: fixed;
       }
   
       .site-header.float-header {
           background-color: rgba(0,0,0,0.9);
           padding: 5px;
       }
       ```
   
 * Sydne Theme is build like this by default.
    Your Theme would take a lot of work
   to change it. Hope this will be helpful Cheers TR
 *  Thread Starter [masheen](https://wordpress.org/support/users/masheen/)
 * (@masheen)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818089)
 * What if I do like, but instead Hover to indicate something associated with Scorll???
   Or something like that? Edit zerif-lite style.css
 *     ```
       }
       .header.header > .navbar {
       	background-color: rgba(0,0,0,0.1);
       	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
       	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
       transition: background 0.3s ease 0.5s, transform 0.2s ease-in-out 0.5s;
   
       }
   
       .header.header > .navbar:hover
       {
       background:rgba(0,0,0,0.5);
       -webkit-animation: pulse 1.5s infinite ease-in-out;
       }
       ```
   
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818090)
 * Hey masheen !
 * Zerif lite uses bootstrap and a fixed navbar already and yes there is always 
   a solution to any problem.it can be done using the following jQuery :
 *     ```
       $(document).ready(function(){
          var scroll_start = 0;
          var startchange = $('#AN_ID_WHERE_YOU_WANT_OP_CHANGE');
          var offset = startchange.offset();
           if (startchange.length){
              $(document).scroll(function() {
              scroll_start = $(this).scrollTop();
              if(scroll_start > offset.top) {
                $(".navbar-default").css('background-color', 'rgba(0,0,0,.9)');
              }
            });
          }
       });
       ```
   
 * ofc you will have to wrap that code ( you need to wrap jQuery code when using
   it with WordPress ) and put the correct section ID of where you want the color
   to change.Maybe also paste your website link? that would be more helpful in case
   you didn’t know how to follow the solution 🙂
 * Cheers !
 *  Thread Starter [masheen](https://wordpress.org/support/users/masheen/)
 * (@masheen)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818092)
 * Hi codeManiac
    maybe???
 *     ```
       var headerFixed = function() {
       			var headerFix = $('.header.header > .navbar').offset().top;
       			$(window).on('load scroll', function() {
       				var y = $(this).scrollTop();
       				if ( y >= headerFix) {
       					$('.header.header > .navbar').addClass('fixed');
       				} else {
       					$('.header.header > .navbar').removeClass('fixed');
       				}
       				if ( y >= 107 ) {
       					$('.header.header > .navbar').addClass('float-header');
       				} else {
       					$('.header.header > .navbar').removeClass('float-header');
       				}
       			});
       	};
       ```
   
 *  Thread Starter [masheen](https://wordpress.org/support/users/masheen/)
 * (@masheen)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818093)
 * At Sidney in Main.js there is this code. I understand it adds a class of float-
   header if Y>107
 *     ```
       var headerFixed = function() {
       			var headerFix = $('.site-header').offset().top;
       			$(window).on('load scroll', function() {
       				var y = $(this).scrollTop();
       				if ( y >= headerFix) {
       					$('.site-header').addClass('fixed');
       				} else {
       					$('.site-header').removeClass('fixed');
       				}
       				if ( y >= 107 ) {
       					$('.site-header').addClass('float-header');
       				} else {
       					$('.site-header').removeClass('float-header');
       				}
       			});
       ```
   
 *  and then it is called style.css.
 *     ```
       .site-header {
       		position: absolute;
       		top: 0;
       		left: 0;
       		width: 100%;
       		z-index: 1000;
       		background-color: rgba(0,0,0,0.0);
       		padding: 20px 0;
       		-webkit-transition: all 0.3s ease-out;
       		   -moz-transition: all 0.3s ease-out;
       		    -ms-transition: all 0.3s ease-out;
       		     -o-transition: all 0.3s ease-out;
       		        transition: all 0.3s ease-out;
   
       	}
   
       .site-header.fixed {
           position: fixed;
       }
   
       .site-header.float-header {
           background-color: rgba(0,0,0,0.9);
           padding: 5px;
       }
       ```
   
 *  The Zerif-lite it is called .header.header > .navbar
 *     ```
       .header.header > .navbar {
       	background-color: rgba(0,0,0,0.1);
       	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
       	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
       ```
   
 * so i need to Zerif-lite in bootstrap.min add modified code???
 *     ```
       var headerFixed = function() {
       			var headerFix = $('.header.header > .navbar').offset().top;
       			$(window).on('load scroll', function() {
       				var y = $(this).scrollTop();
       				if ( y >= headerFix) {
       					$('.header.header > .navbar').addClass('fixed');
       				} else {
       					$('.header.header > .navbar').removeClass('fixed');
       				}
       				if ( y >= 107 ) {
       					$('.header.header > .navbar').addClass('float-header');
       				} else {
       					$('.header.header > .navbar').removeClass('float-header');
       				}
       			});
       	};
       $(function() {
       		headerFixed();
       }
       ```
   
 * and in Style.css call .header.header > .navbar.float-header
 *     ```
       .header.header > .navbar {
       		position: absolute;
       		top: 0;
       		left: 0;
       		width: 100%;
       		z-index: 1000;
       		background-color: rgba(0,0,0,0.0);
       		padding: 20px 0;
       		-webkit-transition: all 0.3s ease-out;
       		   -moz-transition: all 0.3s ease-out;
       		    -ms-transition: all 0.3s ease-out;
       		     -o-transition: all 0.3s ease-out;
       		        transition: all 0.3s ease-out;
   
       	}
   
       .header.header > .navbar.fixed {
           position: fixed;
       }
   
       .header.header > .navbar.float-header  {
           background-color: rgba(0,0,0,0.9);
           padding: 5px;
       }
       ```
   
 *  right?? but it is not work! :-(((
 *  Thread Starter [masheen](https://wordpress.org/support/users/masheen/)
 * (@masheen)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818095)
 * It’s works -))) thx all
 * [http://alter.esy.es/](http://alter.esy.es/)
 *  [codeManiac](https://wordpress.org/support/users/codemaniac/)
 * (@codemaniac)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818105)
 * glad it worked ! until the next time 🙂
 *  [Tahoerock](https://wordpress.org/support/users/tahoerock/)
 * (@tahoerock)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818116)
 * Great job.
    You did it yourself 🙂 Cheers TR

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘How to do this effect?’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/zerif-lite/1.8.5.49/screenshot.
   png)
 * Zerif Lite
 * [Support Threads](https://wordpress.org/support/theme/zerif-lite/)
 * [Active Topics](https://wordpress.org/support/theme/zerif-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/zerif-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/zerif-lite/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [Tahoerock](https://wordpress.org/support/users/tahoerock/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/how-to-do-this-effect/#post-6818116)
 * Status: resolved