Creating a div that automatically scrolls along with the page as it reaches the edges of the viewport

My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/QWOydJe

I'm interested in having the child div stick to the top of the page while scrolling down, but adhere to the bottom of the page when scrolling up - essentially scrolling upon hitting either end of the viewport instead of just staying fixed at the top. Is this achievable through html/css alone or would it require a script?

htmlcss

Answer №1

Check out this new approach - I've made some changes to your .Fbox-Div.

Click on the code snippet below to see it in action.

.floating-box-wrapper {
  float: left;
  margin-top: 800px;
  margin-bottom: 800px;
  width: 140px;
  height: 1400px;
}

.floating-box {
  position: relative;
  background: gray;
  height: 1228px;
  width: 120px;
  padding: .5rem;
  border-style: solid;
  border-radius: 15px;
  border: 3px solid #0077AE;
  background-color: white;
}

.Fbox-Div {
  position: sticky;
  width: 120px;
  /* max-height: 100%; */
  height: calc(100vh - 4rem);
  top: 2rem;
}

.PPR-Div {
  display: flex;
  justify-content: center;
}

.Book-In-Div {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
}

.Feedback-Div {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.OOH-Div {
  display: flex;
  justify-content: center;
}

.PPR-button {
  display: flex;
  justify-content: center;
}

.Book-In-Button {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
}

.Feedback-Button {
  display: flex;
  justify-content: center;
}

.OOH-Button {
  display: flex;
  justify-content: center;
}
<div class="floating-box-wrapper">
  <div class="floating-box">
    <div class="Fbox-Div">
      <div class="PPR-Div">
        <a href="https://eghf.redatlas.co.uk/public/ppr?embedded=true">
          <img src="https://i.imgur.com/arbLHY0.png" title="PPR Form" alt="PPR" class="PPR-button" width="100px" height="100px"></a>
      </div>
      <div class="Book-In-Div">
        <a href="file:///C:/Users/alexf/Desktop/HTML/Contact.html">
          <img src="https://i.imgur.com/dbNiH1J.png" title="Book In/Out" alt="Book-In" class="Book-In-Button" width="100px" height="100px"></a>
      </div>
      <div class="Feedback-Div">
        <a href="file:///C:/Users/alexf/Desktop/HTML/Contact.html">
          <img src="https://i.imgur.com/opqqn4C.png" title="Feedback" alt="Feedback" class="Feedback-button" width="100px" height="100px"></a>
      </div>
      <div class="OOH-Div">
        <a href="file:///C:/Users/alexf/Desktop/HTML/Contact.html">
          <img src="https://i.imgur.com/ZoCNpRV.png" title="Out-of-Hours" alt="OOH" class="OOH-button" width="120px" height="110px"></a>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing ajax requests for lazy loading while scrolling through the middle of the window can be a challenging task. Here are some tips on

I have implemented Lazy loading in my Project. I found a reference at which explains how to make an ajax call after scrolling and image upload with slow mode without allowing scrolling until the loader is shown. The code snippet I am using is as follows: ...

javascriptjqueryhtmlajaxasp.net-mvc

The template in AngularJS route fails to display

I am currently facing an issue with loading multiple pages using AngularJS $routeProvider and two controllers. Whenever I click on a link from the first partial to go to the second one, the second partial fails to render properly, displaying only template ...

javascripthtmlangularjsangularjs-routing

Problem with background video height on Elementor for Wide screen resolutions

Hello, I trust this message finds you in good health. I have a question regarding the video background on wide/big screens. The issue is that it displays correctly on all devices in Elementor settings and actual testing, except for widescreen LCDs, where ...

htmlcsswordpressvideoelementor

Problem with Bootstrap-slider not loading correctly

I seem to be facing an issue with selecting DOM elements that are part of bootstrap-slider. When I try to target them with events like click, nothing happens. All events work fine when the page is refreshed. What could be causing this problem? $(document ...

javascriptjquerycssbootstrap-slider

Relocate the preview division below the button in the Kartik File Input Widget

There are two input file buttons that allow users to upload an image on each button. Upon selecting an image, a preview of the image will be displayed above the button. The current layout is shown here: https://i.sstatic.net/aLAbo.png When images of diff ...

javascriptjquerycssfile-uploadwidget

Using ng-repeat and selectize in AngularJS to populate a multi-select drop-down with values and set selected values

In this instance, I was able to achieve pure HTML select multiple functionality by using this example (JS Bin of pure html select tag). However, instead of sticking to just the pure HTML approach, I opted to use the Selectize plugin. The confusion arose w ...

javascripthtmlangularjsselectize.jsmultiple-select

Increasing the size of the .ui-btn-left component

Seeking advice on a Javascript query that I can't seem to resolve online. As a beginner in Javascript, I'm struggling with what seems like a simple issue. My dilemma lies in enlarging the close button on a jQuery page. .ui-dialog .ui-header .ui- ...

jqueryhtmlcssjquery-mobilemobile

Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to: <div class='layout horizontal'> < ...

htmlcssangularjspolymerpolymer-1.0

The slideUp function is not functioning as expected

I am trying to implement a slideUp effect on my webpage. Here is the code within my <body> tag: <script> $('#slide_up').click(function(){ $('p.text_study').slideUp('slow', function() { $ ...

javascripthtml

Generate an li element that is interactive, containing both text and a span element

I am dealing with a JSON array that looks like this: var teamDetails=[ { "pType" : "Search Engines", "count" : 5}, { "pType" : "Content Server", "count" : 1}, { "pType" : "Search Engines", "count" : 1}, { "pType" : "Business", "count" : 1,}, { "pTyp ...

javascriptjqueryhtmljsonajax

Exploring Next.js: A beginner's attempt at displaying basic JSON data

I'm having trouble updating and displaying the content of my JSON data in my React app. Despite trying various solutions, including adjusting the return value of functions and seeking help on forums, I still cannot get rid of the issue where an empty ...

htmljsonnext.js

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

Showing pictures from directories outside the web root (public_html)

Situation: I have a collection of images stored in a directory named uploads or images located outside the website's main folder (outside of public_html). My goal is to display one of these images inside a file called image.php. Guidelines for achi ...

phphtmlimage

Is there a way to customize this JQuery and HTML code to be specific to each row?

In CB UserList, each row in the form appears multiple times representing different records. The below code is intended to display a submit button and modules for show/hide functionality separately for each record on the list. However, when a user makes a s ...

htmljquery

Ways to calculate outcome

I'm fairly new to PHP and have run into an issue regarding displaying the number of results. For example, showing 'There are 200 results'. Thank you in advance. Below is the code I am working with: try { $bdd = new PDO("mysql:host=localho ...

phphtmlcsssqlcount

Converting Apache POI Word documents to clean HTML stripping out styles and superfluous tags

I am currently working on converting Word documents to clean HTML. I have been using Apache POI, but it seems to create messy output similar to MS Word's own HTML saving method. What I really need is a solution like the one offered by . For instance, ...

javahtmlcssms-wordapache-poi

Exploring the Features of Bottom and Right in jQuery

Here is a snippet of jQuery code that I included in a sample program: $('#left').click(function(){ $('.box').animate({ left: "-=40px", }, function(){/* End of Animation*/}); }); $('#right ...

jquerycss

What causes Font Awesome 5 icons to vanish when changing the font-family?

I am facing an issue with the code I have below. It changes the font style successfully, but it also causes the icon to disappear. Can anyone provide tips on how to ensure that the icon remains visible while changing the font style? <link rel="styles ...

cssfont-awesomefont-awesome-5

What is the best way to evenly distribute input elements horizontally within the parent container?

I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...

htmlcss

Issue with jQuery UI: Accordion not functioning properly

I have created a nested sortable accordion, but there seems to be an issue. Within the 'accordion2' id, the heights of each item are too small and a vertical scroll bar appears. The content of the item labeled '1' is being cut off, show ...

javascriptjqueryhtmljquery-ui