Showing a property only as you scroll through the page

Question

Showing a property only as you scroll through the page

Seeking assistance on creating a scrolling effect for a box shadow property using HTML, CSS, and JS.

The goal is to have the shadow appear with a subtle transition while scrolling and then disappear when scrolling stops.

Here's the code I've been working with:

<head>
    <title>website</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="mySidenav" class="sidenav" onscroll="scrollShadow()"></div>

CSS

.sidenav {
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: skyblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
}

JS

function scrollShadow() {
document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px 10px black"; 
}

Any advice or solutions would be greatly appreciated!

javascript html css

Answer 1

Answer №1

If you're finding it difficult to manage the style attribute, especially when dealing with multiple elements, consider applying a class to body and using CSS to style the elements instead.

(function iife() {
    var body = document.body;
    var timer;
  
    window.addEventListener('scroll', function onScroll() {
        clearTimeout(timer);
        body.classList.add('scrolling');
    
        timer = setTimeout(function removeClass() {
        body.classList.remove('scrolling');
        }, 150);
    }, false);
})();

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 5000px;
  background: lightgrey;
  transition: background 5s;
}

.scrolling #container {
  background: red;
}

#fix {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 120px;
  width: 20px;
  background: white;
  transition: all 300ms ease 0s;
}

.scrolling #fix {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
}

<div id="container">
  <div id="fix"></div>
</div>

Answer 2

If you're finding it difficult to manage the style attribute, especially when dealing with multiple elements, consider applying a class to body and using CSS to style the elements instead.

(function iife() {
    var body = document.body;
    var timer;
  
    window.addEventListener('scroll', function onScroll() {
        clearTimeout(timer);
        body.classList.add('scrolling');
    
        timer = setTimeout(function removeClass() {
        body.classList.remove('scrolling');
        }, 150);
    }, false);
})();

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 5000px;
  background: lightgrey;
  transition: background 5s;
}

.scrolling #container {
  background: red;
}

#fix {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 120px;
  width: 20px;
  background: white;
  transition: all 300ms ease 0s;
}

.scrolling #fix {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
}

<div id="container">
  <div id="fix"></div>
</div>

Answer 3

Answer №2

Using jQuery, you can implement a scroll method like so:

<script>
   $(function(){
       $(window).scroll(function(){
           if($(window).scrollTop()>=40){
                /*perform action */
               addShadowEffect();
           }
       });
   });

   function addShadowEffect() {
       document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px     10px black"; 
  }
</script>

Answer 4

Using jQuery, you can implement a scroll method like so:

<script>
   $(function(){
       $(window).scroll(function(){
           if($(window).scrollTop()>=40){
                /*perform action */
               addShadowEffect();
           }
       });
   });

   function addShadowEffect() {
       document.getElementsByClassName("sidenav").style.boxShadow = "3px 0px     10px black"; 
  }
</script>

Answer 5

Answer №3

To start off, it's important to avoid mixing CSS with JS as it doesn't belong there. The recommended approach is to assign a class to the body element and style it with CSS accordingly. Determining when the user stops scrolling isn't natively possible, so setting a timeout that reverts changes unless the user scrolls again is a workaround. Ensure the window is fully loaded before targeting elements that may not exist yet. Below is a sample code snippet that demonstrates this:

window.addEventListener('load', function(){

    var timeout = null;
    var body = document.querySelector('body');
    var scrollClass = 'scrolled';

    window.addEventListener('scroll', function(){
        clearTimeout(timeout);
        body.classList.add(scrollClass);

        timeout = setTimeout(function(){
            body.classList.remove(scrollClass);
        }, 250);
    });

});

body {
  height: 2000px;
}

.sidenav {
    height: 100%;
    width: 280px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: skyblue;
    overflow-x: hidden;
    padding-top: 10px;
    transition: box-shadow 500ms ease-in-out;
}

.scrolled .sidenav{
    box-shadow: 3px 0px 10px #000;
}

<div class="sidenav"></div>

This solution should meet your requirements.

Sincerely, Tom

Answer 6

To start off, it's important to avoid mixing CSS with JS as it doesn't belong there. The recommended approach is to assign a class to the body element and style it with CSS accordingly. Determining when the user stops scrolling isn't natively possible, so setting a timeout that reverts changes unless the user scrolls again is a workaround. Ensure the window is fully loaded before targeting elements that may not exist yet. Below is a sample code snippet that demonstrates this:

window.addEventListener('load', function(){

    var timeout = null;
    var body = document.querySelector('body');
    var scrollClass = 'scrolled';

    window.addEventListener('scroll', function(){
        clearTimeout(timeout);
        body.classList.add(scrollClass);

        timeout = setTimeout(function(){
            body.classList.remove(scrollClass);
        }, 250);
    });

});

body {
  height: 2000px;
}

.sidenav {
    height: 100%;
    width: 280px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: skyblue;
    overflow-x: hidden;
    padding-top: 10px;
    transition: box-shadow 500ms ease-in-out;
}

.scrolled .sidenav{
    box-shadow: 3px 0px 10px #000;
}

<div class="sidenav"></div>

This solution should meet your requirements.

Sincerely, Tom

Showing a property only as you scroll through the page

Answer №1

Answer №2

Answer №3

Similar questions

Angular error message: Trying to access the property 'name' of an undefined object leads to a TypeError

What is the best way to maintain the selected row during pagination in Yii?

Configuring IP Whitelisting for Firebase Cloud Functions with MongoDB Cluster

The ExpressJS EJS issue arises when trying to access a property that is undefined

TradingView widget chart embedded within a web page is failing to display when hosted on X

CSS code to modify background color upon mouse hover

The HTML code does not seem to be acknowledging the CakePHP link

A guide to incorporating a textview into a React application using the Google Maps API

Transmit a basic JSON object from a Node.js server to an index.html webpage

How can I implement a Component to show the details of a blog post when clicked in Next.js?

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

Learning how to integrate Next.js, React.js, and Redux into an HTML page for an enhanced user

The jQuery autocomplete feature is malfunctioning, as it is unable to display any search

Determine selected option in Radio Button

Using PHP to send variables to an AJAX function via parameters

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

Integrating VueJs into a pre-existing .net core 5 project

Implement the Vue.js @click directive in a location outside of an HTML element

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Navigating back to the beginning of the webpage following the completion of a form submission utilizing Master Pages and Ajax