changing of the header from 1 to 2 when scrolling !

Resolved

(@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)

5 days, 13 hours ago

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)

4 days, 16 hours ago
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)

3 days, 18 hours ago

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

Moderator bcworkz
(@bcworkz)

3 days, 14 hours ago

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)

3 days, 14 hours ago

thanks

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

You must be logged in to reply to this topic.

changing of the header from 1 to 2 when scrolling !

Topic Tags

Views