Position the floating div on top of the div with a vertical scroll bar

I am trying to achieve a scroll effect on a div when the user scrolls down. Below is the HTML code I am working with:

<body>
<div class="container">
<div class="floaty">Yep</div>
content
</div>

The container has a height of around 700px, which may vary depending on the content inside. It has both vertical and horizontal scrolling set in CSS, so that scrolling only affects the content within the div, not the whole page. However, even though the "floaty" element is positioned fixed, it remains at the top of the div and does not move along with the scroll. This might be due to the browser not recognizing the page as scrolling.

In addition, the container has a position relative set. I am wondering how I can resolve this issue and make the div scroll properly. Do I need to use jQuery or is there another solution?

jqueryhtmlcssfixed

Answer №1

Let me give it a shot:

.box{
    height:150px;
    border:1px solid blue;
    margin-top:30px;
    width:90%;
    overflow-y:auto;
}
.sticky{
    position:fixed;
    width:100%;
    height:40px;
    border:2px solid purple;
    top:10px;
}

I'm not entirely certain if this meets your expectations, so please provide clarification if needed.

SEE DEMO

Answer №2

If you would like the floating div to move along with the content (and it is not explicitly stated), the solution is to set its position as absolute in relation to the container.

.container{
position:relative;
height:200px;
border:1px solid #000000;
margin-top:50px;
width:300px;
overflow-y:scroll;
}
.floaty{
position:absolute;
top:0; //or you can choose a different location
left:0;
background:#eaeaea;
width:300px;
height:50px;
}

Check out the demo here!

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

Breakpoint for mobile menu in FoundationCSS

When the browser is resized, the mobile menu appears at 568x320, which is the default breakpoint. https://i.sstatic.net/ZSbiq.jpg I would like to create a breakpoint around 900px to address the issue with the menu being too large as shown in the image be ...

jquerycssjquery-mobilezurb-foundation

Changing class from 'current-menu-item' to 'active' for filtering

I'm currently developing a unique theme inspired by the Roots Theme, which now incorporates Twitter Bootstrap as its framework. One challenge I encountered is that it utilizes a custom 'walker' for navigation, making it difficult to simply ...

phpcsswordpresstwitter-bootstrapwordpress-theming

"Font-face is effective in Internet Explorer but appears to have compatibility issues in Firefox particularly regarding font formats

I have downloaded a free font that comes in regular and bold variations, with the following formats: svg, eot, ttf, woff. These fonts display properly in Internet Explorer, but they are not working in Firefox. 1. I would like to understand which format is ...

csssvgfontsfont-faceeot

The Laravel href link will fail to work when the URL does not include the string 'http'

I am encountering an issue with a particular hyperlink tag <a href="{{ $organization->website }}">Link</a> When the URL in $organization->website does not start with http:// or https://, the link fails to direct me properly. Instead, i ...

htmllaravelhttphref

Choice pick, fails to display default

Default value is content1, but "text default show" is not displayed Please assist me.. jQuery(document).ready(function($) { jQuery('#select123').change(function() { jQuery('.co ...

jqueryhtml

Hover effect on a single cell in a Bootstrap table

As I was working on creating a calendar design, I found myself pondering how to incorporate a hover effect using Bootstrap 4 for the cells. Here is a preview of the current calendar design I am aiming to achieve a hover effect similar to Bootstrap's ...

htmlcsstwitter-bootstrapbootstrap-4

Wordpress team exhibition

Does anyone know how to create a Team showcase slider in Wordpress? I have been using slick slider, but I'm looking for a way to add team members easily through a plugin rather than manually. I found an image of what I want it to look like. Can any ...

javascriptjqueryhtmlwordpress

Pass an array containing an HTML string to the $.post method in jQuery

I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...

javascriptphpjqueryhtmljson

Issue with jquery .click function not triggering after CSS adjustment

In the process of creating a fun game where two players take turns drawing on a grid by clicking <td> elements. Currently, I have implemented the functionality to toggle the background color of a <td> element from black to white and vice versa ...

javascriptjquerycssajax

Tips for adding event listeners to dynamically-loaded content using AJAX

I need help with the following code snippet: $("#contantainer").load("some_page.txt"); Inside some_page.txt, I have the following content: <div class="nav"> <ul id="nav_ul"> <li><a class="nav_a" href="#home" id="home"> ...

javascriptjqueryhtmlajax

Looking to rearrange the layout of jqgrid

I need to reposition the jqgrid away from its default top left position. I have attempted some adjustments but they are not working as expected. Below is the code snippet for your review and suggestions: Here is the HTML code snippet: <div> &l ...

jqueryasp.netcssjqgrid

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts

Prevent the ability to reload and use the F5 key on my PHP page

Currently, I am utilizing a timer on my PHP page. However, whenever someone refreshes the page, the timer resets from the beginning. I am looking for a solution to disable the ability to refresh the page using F5 or reload options within my PHP page. Appr ...

phpjavascriptjquerytimer

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

It seems like the issue lies with div.ü and div.yayın, as they are causing overflow on the right side of the page. When these elements are removed, the overflow issue goes away. Are there different positioning codes that can be used to prevent this? d ...

htmlcss

Tips for updating the current image in the control navigation of the flexslider

I want to customize the control nav image to give it a unique appearance that corresponds to the slide image. Here's my JavaScript code: $(window).load(function() { $('#main-slider').flexslider({ animation: "fade", controlNa ...

jqueryflexslider

Ways to enlarge image dimensions with Carousel in bootstrap 4

Is there a way to enlarge the image size without overlapping the text on the right side? I've tried adjusting the CSS code but it always extends to the right. I need the image to expand towards the left. <div class="container"> <d ...

htmlbootstrap-4

Using jQuery and Ajax to dynamically populate a select input with items upon page initialization

I am facing an issue with 2 <select> inputs: <select id="country"> <option value="" selected>Choose</option> <option value="usa">USA</option> <option value="uk">UK</option> </select> <select ...

javascriptphpjqueryajax

Tips for updating a PHP variable with a jQuery variable

Greetings! I am currently in the process of creating a shopping cart feature for my website. The ordered products are displayed to the customer, and all product details are stored in a session variable. Customers can adjust the quantity of each product as ...

phpjqueryajax

Calculating the quantity of choice elements within a dropdown menu using jQuery

Is there a way to calculate the number of <option> elements in a <select> element using jQuery? <select data-attr="dropdown" id="input1"> <option value="Male" id="Male">Male</option> <option value="Female" id="Female"& ...

javascriptjqueryhtml

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

htmlcsstwitter-bootstrap