Display logo when website has been scrolled

Question

Display logo when website has been scrolled

On my website, I want to display a logo in the header only when the site has been scrolled. I attempted to accomplish this with JavaScript:

if(document.getElementById("div").scrollTop != 0){
  document.write("<img src='logo.jpg'>");
}

However, my code was unsuccessful. Does anyone know how to achieve this?

javascript css

Answer 1

Answer №1

To implement a scroll event listener in JavaScript, use the code

window.addEventListener('scroll', callback)

and then assign the value "block" to the img element's property.

window.addEventListener('scroll', function(e) {
  if (document.getElementsByTagName("html")[0].scrollTop > 5) {
    document.getElementsByClassName('imgHeader')[0].style.display = "block";
  } else {
    document.getElementsByClassName('imgHeader')[0].style.display = "none";
  }
});

.imgHeader {
  height: 100px;
  width: 100px;
  display: none;
}

div {
  height: 1000px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
}

<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>

Answer 2

To implement a scroll event listener in JavaScript, use the code

window.addEventListener('scroll', callback)

and then assign the value "block" to the img element's property.

window.addEventListener('scroll', function(e) {
  if (document.getElementsByTagName("html")[0].scrollTop > 5) {
    document.getElementsByClassName('imgHeader')[0].style.display = "block";
  } else {
    document.getElementsByClassName('imgHeader')[0].style.display = "none";
  }
});

.imgHeader {
  height: 100px;
  width: 100px;
  display: none;
}

div {
  height: 1000px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
}

<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>

Answer 3

Answer №2

Give this a try

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 5) {
    $(".below-top-header").addClass("show-class");
  } else {
    $(".below-top-header").removeClass("show-class");
  }
});

.content {
  height: 500px;
}

.show-class {
  position: fixed;
  display: block !important;
}

.hide-class {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="below-top-header hide-class">
    Image
  </div>
</div>

Answer 4

Give this a try

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 5) {
    $(".below-top-header").addClass("show-class");
  } else {
    $(".below-top-header").removeClass("show-class");
  }
});

.content {
  height: 500px;
}

.show-class {
  position: fixed;
  display: block !important;
}

.hide-class {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="below-top-header hide-class">
    Image
  </div>
</div>

Answer 5

Answer №3

It seems like incorporating some JavaScript is necessary to achieve the desired functionality.

Below is a simple code snippet demonstrating the approach I employed:

Begin by including the logo within the html code, but with its CSS set to display: none,
Utilize
```
window.addEventListener('scroll', callback)
```
to toggle the display property from none to block when the user scrolls down the page (i.e., when
```
document.documentElement.scrollTop > 0
```
).

var logo = document.getElementById('logo');

window.addEventListener('scroll', function(e) {
  if (document.documentElement.scrollTop > 0) {
        logo.style.display = 'block';
  }else logo.style.display = 'none';
});

#logo {
  display: none;
  position: fixed;
  top: 0;
  background: #aaa;
}

#page {
  background: #ddd;
  height: 2000px;
}

<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>

I hope this solution proves useful to you.

Answer 6

It seems like incorporating some JavaScript is necessary to achieve the desired functionality.

Below is a simple code snippet demonstrating the approach I employed:

Begin by including the logo within the html code, but with its CSS set to display: none,
Utilize
```
window.addEventListener('scroll', callback)
```
to toggle the display property from none to block when the user scrolls down the page (i.e., when
```
document.documentElement.scrollTop > 0
```
).

var logo = document.getElementById('logo');

window.addEventListener('scroll', function(e) {
  if (document.documentElement.scrollTop > 0) {
        logo.style.display = 'block';
  }else logo.style.display = 'none';
});

#logo {
  display: none;
  position: fixed;
  top: 0;
  background: #aaa;
}

#page {
  background: #ddd;
  height: 2000px;
}

<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>

I hope this solution proves useful to you.

Answer 7

Answer №4

To ensure your code is executed when the user scrolls, you must add a scrollListener to the window object. This will prevent it from only running on page load.

For more information on EventListeners, visit: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener

window.addEventListener('scroll', function(e) {
    //perform actions when the window is scrolled
});

Keep in mind that the event will be triggered every time the user scrolls.

Answer 8

To ensure your code is executed when the user scrolls, you must add a scrollListener to the window object. This will prevent it from only running on page load.

For more information on EventListeners, visit: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener

window.addEventListener('scroll', function(e) {
    //perform actions when the window is scrolled
});

Keep in mind that the event will be triggered every time the user scrolls.

Display logo when website has been scrolled

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The sidebar in Semantic UI does not have a specified height for the form segment

Adding individual flag icons for each country in your Datatables can be a significant enhancement to

Unable to fetch data in CakePHP 3.x controller using jQuery AJAX POST

What is the best way to trigger actions from child components within React Redux?

"Exploring the possibilities of Sketchfab through an AJAX JSON

Pair objects that possess a specific attribute

Converting RGBA to Hex Color Code with Javascript: A Step-by-Step Guide

Is it feasible to link an Angular property value to the value of an HTML data attribute?

Tallying the number of messages on Facebook

Empty req.params in nested ExpressJS routers

Unusual glitch with paint/rendering in Safari while navigating through a lengthy list of content

Navigating the Google Maps API: Implementing Scroll Zoom to Focus on a Single Marker

Updating item information within an array in Vue.js

Word.js alternative for document files

Buttons in Datatables fail to appear when using ajax loading

Utilizing AJAX to load a WAV file

Sequelize synchronization does not generate the database table

Exploring Angular.js: Finding the correct path in a JSON array

generate a flexible div that adjusts its height based on the size of the browser window

Is there a way to alter multiple classes using hover effect on a single class without the use of JavaScript, only employing