Guide to attaching a page content button to a fixed header

Question

Guide to attaching a page content button to a fixed header

I am currently developing a webpage with a sticky header, and I want to include an animated button that moves onto the header when scrolled past. You can check out my code snippet here: https://jsfiddle.net/ykL50pjf/

The specific ID for the button is

#test_button

Despite extensive research, I have not been able to find any examples of this feature in action.

An ideal illustration of what I'm trying to achieve can be seen on the Lemonade website. Check it out here:

In addition, you can also watch this video for reference: https://youtu.be/l1SxIN6fylI

Any tips or assistance on how to accomplish this would be highly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

To add an extra button, you can have it initially hidden and then position it as desired. Utilize tools like animatecss by applying the slide down class and simply toggle its visibility similar to how you're managing the sticky header. I would've left a comment but I'm short of 50 rep points.

Answer 2

To add an extra button, you can have it initially hidden and then position it as desired. Utilize tools like animatecss by applying the slide down class and simply toggle its visibility similar to how you're managing the sticky header. I would've left a comment but I'm short of 50 rep points.

Answer 3

Answer №2

Despite not meeting your exact specifications, I have done my best to create something that might be helpful to you :) Hope this serves your needs!

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  position: -webkit-sticky;
  position: sticky;
  top: -1%;
}

.content {
  padding: 16px;
}

.test_button {
  position: -webkit-sticky;
  position: sticky;
  padding: 20px;
  top: -1%;
}

button {
  margin: 0 0 0 80%;
  padding: 20px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="top-container">
    <h1>Scroll Down</h1>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="header" id="myHeader">
    <h2>My Header</h2>
  </div>


  <div class="content">
    <div class="test_button" class="test_button">
      <button>
        Test
      </button>

    </div>
  
    <h3>On Scroll Sticky Header</h3>
    <p>The header will stick to the top when you reach its scroll position.</p>
    <p>Scroll back up to remove the sticky effect.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut ..

Answer 4

Despite not meeting your exact specifications, I have done my best to create something that might be helpful to you :) Hope this serves your needs!

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
  position: -webkit-sticky;
  position: sticky;
  top: -1%;
}

.content {
  padding: 16px;
}

.test_button {
  position: -webkit-sticky;
  position: sticky;
  padding: 20px;
  top: -1%;
}

button {
  margin: 0 0 0 80%;
  padding: 20px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="top-container">
    <h1>Scroll Down</h1>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="header" id="myHeader">
    <h2>My Header</h2>
  </div>


  <div class="content">
    <div class="test_button" class="test_button">
      <button>
        Test
      </button>

    </div>
  
    <h3>On Scroll Sticky Header</h3>
    <p>The header will stick to the top when you reach its scroll position.</p>
    <p>Scroll back up to remove the sticky effect.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut ..

Guide to attaching a page content button to a fixed header

Answer №1

Answer №2

Similar questions

Using Vue: Save user information in the Vuex store prior to registration

What is the best way to implement a sliding animation for a toggle button?

Displaying SQL data in a table using PHP

Unable to activate IndexedDb persistence with Firebase v9 in a Next.js PWA

Guide to placing the cursor at a specified position within an editable content div

Exploring the intricacies of Bower and enhancing dependency management

Using jQuery, learn how to successfully call a selector from dynamic content

Sidenav Content with all elements having opacity applied

Animation controlled by a button

Creating an outlined effect on a transparent image in a canvas: step-by-step guide

Click the button to instantly scroll to a particular word with highlighting, and with another click, jump to the next occurrence

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

Password Reset Function Malfunctioning

Manipulate JQuery plug-in properties within an AJAX request using MVC

Utilizing Angular 6 mergeMap for handling nested API requests

Error: React is throwing a SyntaxError because a ")" is missing in the argument list

Activating Unsplash API to initiate download

How to modify the background color in Material Ui's datepicker?

The code functions properly on localhost, but encounters an issue on the live site, resulting in an Uncaught SyntaxError: Unexpected token '<' in JSON at

What is the correct process for submitting an HTML form following the loading of asynchronous data?