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

What steps are involved in adding an image to an autocomplete script?

Unable to choose from the dropdown menu

Using jQuery to dynamically populate select options based on JSON data

Attempting to troubleshoot and execute knex commands within the package.json file

For each item they possess, attach a "!" at the end

Utilize SVG background with transparent text for a clear view of surrounding content

Is it possible to extract only the Bolded Text and store it in a String Array within a Spanned String

Enhancing CSS with Additional Properties

Can you explain the significance of this specific form of variable declaration?

Merging Vue props with v-for for powerful data handling

Issues with Sound Not Playing When Button is Clicked in Python Flask

Node.js - Creating seamless integration between Sequelize model JS and controller TS

Achieving Perfect Alignment in Dreamweaver: Crafting a Stylish Header Container

Finding your current location and address using HTML5 geolocation

`Enhance Image with a Fresh Hue`

Tips for deleting an HTML row and removing an entry from a MySQL database through the use of AJAX

Turbolinks gem causing ShareThis to malfunction

Elevate the index of the name attribute for an input field within a dynamically generated form

Is it possible to safeguard undisclosed data in browser console?

Issue arises where multiple asynchronous functions cause infinite re-rendering due to the shared loading state