Support » Developing with WordPress » changing of the header from 1 to 2 when scrolling !

  • Resolved johannes999

    (@johannes999)


    hello,
    I want when I scroll to change header from header 1 to header 2
    so I found this javascript code :

    
    <script>
     cons header=document.querySellctor ("header");
    window.addEventListener ('scroll',() => {
    	if (window.scrollY > 0)  {		
    		header.classList.add ("change-site-header") ;
    		
    	}
    	else {
    		header.classList.remove ("change-site-header") ;
    		
    	} 
    })

    I make this htl code :

    
    <header>
    		<div class="flex-container-site-header ">		<!-- site-header -->	</div>
    	
    		<div class="change-site-header"> aaa </div>    	
    		</header>
    

    css code of first header is :

    
    .flex-container-site-header { 
     display:flex;
    	flex-direction:row;
    	justify-content:space-between;
    	align-items:center;
       margin-top:0;
      width:100%;   
      height: 80px;
      background-color:#343a40;
      box-sizing: border-box; 
    position:fixed;
      z-index: 1;
    	
    }

    and css code of second header is :

    
    .change-site-header {
    	display:flex;
    	flex-direction:row;
    	justify-content:space-between;
    	align-items:center;
       margin-top:0;
      width:100%;   
      height: 80px;
      box-sizing: border-box; 
    position:fixed;
      z-index: 1;	
    background-color:red;	
    	
    }

    now my questions are :
    1- do I have to implement javascript in my theme to let the script work? for example cdn or in function.php ?

    2- is my html code above is OK or it is wrong? if it is wrong what do I have to change?

    for the question 1 I have inserted this code (for javascript)in my function.php

    
    function auto_garage_scripts_function() {
      wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/myscript.js');
    }
    add_action('wp_enqueue_scripts','auto_garage_scripts_function');
    

    is this code in function.php is OK?
    very short answers wil be enough.

    thanks

    • This topic was modified 5 days, 13 hours ago by bcworkz. Reason: code format fixed

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    Plain JavaScript within <script> tags do not need any other supporting code. However, you do have a typo in document.querySelector ("header"); (“Selector” misspelled)

    Your HTML and CSS is not the way I’d approach this. It’s not necessarily wrong (though slightly flawed in its present form). What I would suggest:

    Add a class attribute to <header> and apply as much common CSS as possible here that can apply to either child element. For any CSS that needs to be specific to each major header div (like background color), add a unique class and apply CSS accordingly.

    Add unique ID attributes to each major div. JavaScript is more efficient if you select by ID. Have the script add/remove another class attribute that simply relates to a display: none; rule. Initially, this class would be assigned to the second major div. On scroll, remove this class from that element and add it to the other. If the user should scroll back to the top, do the same in reverse. This last part isn’t necessarily required, but it’s pretty typical behavior.

    Thread Starter johannes999

    (@johannes999)

    thanks,
    after working while I have found the problem . it was the html code .
    i have changed the html code from :

    
    

    <header>
    <div class=”flex-container-site-header “> </div>

    <div class=”change-site-header”> aaa </div>
    </header>
    I changed to:

    <div id="header">   
    		
    		 </header>
    	
    	<div class="change">
    			
    		</div>
    
    
    the css code is :
    
    #header {  
      margin-top:0;
      width:100%;   
      height: 80px;
      background-color:#343a40;
      box-sizing: border-box; 
    position:fixed;
      z-index: 1;
    	
    }
    #change {	
       margin-top:0;
      width:100%;   
      height: 80px;
      box-sizing: border-box; 
    position:fixed;
      z-index: 1;	
    background-color:red;
    	
    }
    
    
    javascript code is :
    
    
    <script>
     const header = document.querySelector ("header");
    window.addEventListener ('scroll',()=> {
    	if (window.scrollY > 0)  {
    	
    		header.classList.add ("change") ;
    		
    	}
    	else {
    		header.classList.remove ("change") ;
    		
    		
    		
    	} 
    })
    	
    
    </script>

    `

    now when you go to my website you see , when you scrol down the header color change from black to red . and when you go to top the header color change back to black.
    thanks Bcworkz

    johannes

    • This reply was modified 3 days, 14 hours ago by bcworkz. Reason: . selector to #
    Thread Starter johannes999

    (@johannes999)

    I want to correct my fault. the change class must be id.
    #change in place of .change

    Moderator bcworkz

    (@bcworkz)

    Your added correction post should suffice, but I’ve updated the original code you posted anyway. Thanks for coming back to correct!

    Thread Starter johannes999

    (@johannes999)

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.