DEV Community: mutesialine

Eventlistener(scroll) using tailwindcss and vanilla Javacript

mutesialine — Wed, 16 Nov 2022 14:12:55 +0000

Scroll event happen when user scroll in a saturn direction and it works on the browser window lets take an example of the page where navbar change background ,text and image when scroll event happen

index.html

<html>
<head>
<title>capgemini</title>
</head>
<body>
//navbar
<div class="w-full h-[800px]  relative  pb-10 bg-heroImage  bg-cover">
        <div id="navbar" class="navwhite text-white   fixed p-8 top-0 w-full  flex  gap-8 justify-between lg:justify-start z-50 items-center "> 
                <img id="image1"  class="w-28" src="./img/logo-white.svg" alt="logowhite">
                <img  id="image2" class="w-28" src="./img/logoblue.svg" alt="logoblue">

                <div class="flex   gap-3">
                    <a href="">Insights</a>
                    <a href="">Industries</a>
                    <a href="">Services</a>
                    <a href="">Carees</a>
                    <a href="">News</a>
                    <a href="">About us</a>
                </div>
        </div>
        <div class="absolute bottom-2 lg:bottom-32 py-6  px-8  space-y-2  bg-opacity-90 text-white   lg:left-20 mx-4 bg-[#056295]  lg:mx-0">
            <h1 class="text-3xl font-bold ">AUTHORS OF CHANGE</h1>
            <p class=" text-lg ">Making the world more inclusive with words</p>
        </div>
    </div>
<script src="/navbar.js"></script>
</body>
</html>

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.navwhite{
  @apply bg-white text-black; 
}

navbar.js

function changeNav(){
  var navbar= document.getElementById('navbar');
  var image1=document.getElementById('image1');
  var image2 = document.getElementById("image2");
  var scrollyValue=window.scrollY;
  if(scrollyValue < 20){
    navbar.classList.remove('navwhite')
    image2.style.display="none";
    image1.style.display="block"
  }
  else{
    navbar.classList.add('navwhite')
    image1.style.display= "none";
    image2.style.display="block"
  }
}
  window.addEventListener("scroll", changeNav);

Before:The fixed navbar

After:when scrolling navbar changes background color, textcolor, and logo image until user stop scrolling

Position in Tailwindcss

mutesialine — Tue, 15 Nov 2022 15:33:08 +0000

Position property is how element is positioned in webpage we have

static: by default all elements are static means they cant be moved like top ,bottom , right or left

Relative:element is positioned related to its normal position
Absolute: The elemenent is positioned absolutly according to its first parent and can be moved top right ,bottom or left

<div class="relative"> <p>paragraphy1</p> <p class="absolute">paragraphy2</p> </div>
Fixed: The element is position based on browser window means can not be moved
sticky : The element is postioned based on user scroll position it act like fixed until its acrross its parents

Max-width ,Min-width vs width

mutesialine — Mon, 14 Nov 2022 13:04:55 +0000

The maximum width specifies the maximum screen width to the specific device
The Min-width specifies the minimum screen width to also the specific devices whereas
width set an element to the fixed width
percentage of width : set apercentage based on a specific width

Better to use width for a fixed element and use max-width for thing that can change to any breakpoint.