Color transition due to position change

JavaScript
1

hey guys, is there anyway i can set my menu bar to be opaque in top:0 position and then go transparent when scrolled down ? I also
apoligize for including all these mess but i thought knowing other color properties might be necessary for solution.here’s my code :

<html>
<head>
<title>...</title>
<style>
* {box-sizing: border-box}

body,html{
	background-color:purple;
	margin:0;
	padding:0;
	height:100%;
	font-size:20px;
	font-family:helvetica,arial;
	}
	
.menu {
	min-height:3em;
    position:sticky;
    top:0;
    z-index:1;}
	
.wrapper{
	max-width:1200px;
    margin:auto;}
	
.content{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	background-color:#efe8ff;
	min-height:100%;
    margin:0;
	padding:1em;
	justify-content:space-evenly;}
	

.child{
	display:flex;
	flex-flow:column wrap;
	width: 20em;
	height:30em;
	border:1px solid black;
	margin:1em;
}

.tablink{line-height:3em;
	color:#D860E6;
	float:left;
	width:50%;
	border:none;
	outline:none;
	font-size:22px;
	-webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;}

.tablink:hover{
	color:#8631b7;
	font-weight:bolder;}

.footer {
    min-height:5em;  
    background-color:#1c1c1c;}
	
#a{background-color:#efe8ff;}
#b{background-color:#e8eeff;}

</style>
</head>

<body>
<div class="menu">

<button class="tablink"  onclick="show('a',this,'rgb(239, 232, 255,0.9)')">A</button>
<button class="tablink" id="default" onclick="show('b',this,'rgb(232, 238, 255,0.9)')">B</button>
</div>


<div class="wrapper">
	
	<div id="a"  class="content">......</div>
	
	<div id="b" class="content">
	
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
		<div class="child"></div>
	
	</div>
	
	<div class="footer"></div>
	

</div>

<script>
function show(page,elmnt,color){
// Hide all elements with class="content" by default */
var i,contents,tablinks;
contents=document.getElementsByClassName("content");
for(i=0;i<contents.length;i++){
	contents[i].style.display="none";}
	
// Remove the background color of all tablinks/buttons
tablinks=document.getElementsByClassName("tablink");
for(i=0;i<tablinks.length;i++){
	tablinks[i].style.backgroundColor="rgb(40, 15, 218,0.9)";}

// Show the specific tab content
document.getElementById(page).style.display="flex";

 // Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor=color;}

// Get the element with id="default" and click on it
document.getElementById("default").click();

</script>
</body>
</html>
2

You would need js to do this.:slight_smile:

You’d detect when the page has scrolled and then add a class to the menu item so that in css you can set the menu to transparent.

Here’s an example using your code but I’m sure you;ll get a better answer in the js forum so i will move the post there anyway :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body, html {
	background-color:purple;
	margin:0;
	padding:0;
	height:100%;
	font-size:20px;
	font-family:helvetica, arial;
}
.menu {
	min-height:3em;
	position:sticky;
	top:0;
	z-index:1;
}
.wrapper {
	max-width:1200px;
	margin:auto;
}
.content {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	background-color:#efe8ff;
	min-height:100%;
	margin:0;
	padding:1em;
	justify-content:space-evenly;
}
.child {
	display:flex;
	flex-flow:column wrap;
	width: 20em;
	height:30em;
	border:1px solid black;
	margin:1em;
}
.tablink {
	line-height:3em;
	color:#D860E6;
	float:left;
	width:50%;
	border:none;
	outline:none;
	font-size:22px;
	-webkit-transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	-o-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
}
.tablink:hover {
	color:#8631b7;
	font-weight:bolder;
}
.footer {
	min-height:5em;
	background-color:#1c1c1c;
}
#a {
	background-color:#efe8ff;
}
#b {
	background-color:#e8eeff;
}
.menu{transition:opacity 1.5s ease;}
.menu.scrolled {opacity:0}


</style>
</head>

<body>
<div id="menu" class="menu">
  <button class="tablink"  onclick="show('a',this,'rgb(239, 232, 255,0.9)')">A</button>
  <button class="tablink" id="default" onclick="show('b',this,'rgb(232, 238, 255,0.9)')">B</button>
</div>
<div class="wrapper">
  <div id="a"  class="content">......</div>
  <div id="b" class="content">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
  <div class="footer"></div>
</div>
<script>
function show(page,elmnt,color){
// Hide all elements with class="content" by default */
var i,contents,tablinks;
contents=document.getElementsByClassName("content");
for(i=0;i<contents.length;i++){
	contents[i].style.display="none";}
	
// Remove the background color of all tablinks/buttons
tablinks=document.getElementsByClassName("tablink");
for(i=0;i<tablinks.length;i++){
	tablinks[i].style.backgroundColor="rgb(40, 15, 218,0.9)";}

// Show the specific tab content
document.getElementById(page).style.display="flex";

 // Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor=color;}

// Get the element with id="default" and click on it
document.getElementById("default").click();

</script>

<script>
(function() {
    window.addEventListener('scroll', throttle(callback, 100));


    function callback() {
        var target = document.getElementById('menu');
        var scrollPosY = window.pageYOffset | document.body.scrollTop;

        console.log(scrollPosY);
        if (scrollPosY >= 150) {
            target.classList.add("scrolled");
            console.log('scrolled');
        } else {
            target.classList.remove("scrolled");
            console.log('Not scrolled');
        }
    }

    function throttle(callback, limit) {
        //http://sampsonblog.com/749/simple-throttle-function
        var wait = false; // Initially, we're not waiting
        return function() { // We return a throttled function
            if (!wait) { // If we're not waiting
                callback.call(); // Execute users function
                wait = true; // Prevent future invocations
                setTimeout(function() { // After a period of time
                    wait = false; // And allow future invocations
                }, limit);
            }
        }
    }

    callback();

}());
</script>



</body>
</html>
2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.