What about a CSS element that is partially fixed?

I distinctly recall coming across an example of this not too long ago, although I am struggling to locate the specific website.

It involved a button or something of that nature situated at the top of the screen, which then remained in place as you scrolled down.

Upon reflection, it likely utilized javascript for this effect, but the transition seemed quite seamless.

Is there anyone familiar with a website that has similar functionality or resources on how to achieve it?

UPDATE
Just to clarify, it wasn't merely achieved through position:fixed or by using javascript to always keep it floating.

javascripthtmlcss

Answer №1

Big thanks to durilai for bringing up that this topic has already been discussed in depth: How can an element slide along with the viewport while scrolling?

Interestingly, I stumbled upon this information right here on SO (while editing a question). The "How to Format" box appears on the side of the edit box and shifts along with the page, but switches to position:fixed when it needs to move out of sight.

SO accomplishes this using jQuery. While they might have their own unique code, I've put together my own version:

var scrollTopOffset = $("#scroll-container").offset().top;
$(window).scroll(function(){
    var currentScroll = $(window).scrollTop();
    var container = $("#scroll-container");
    if (currentScroll > scrollTopOffset) {
        container.css({ position: "fixed", top: "0px" });
    }
    else if (currentScroll <= scrollTopOffset) 
    {
        container.css({ position: "relative", top: "" });
    }
});

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

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Hey everyone! I've been struggling with a problem for the past 4 hours and could really use some help. After logging in, the page redirects to a certain page, but when I press the back button in my browser, I want it to redirect back to that specific ...

phphtml

Attempting to design a versatile button in react js that has multiple functions. On the initial click, it saves data, changes the display to "view", and with a second click, it redirects to the saved page

Is it possible to create a dynamic button in React Js (MERN STACK) that changes its functionality from "Save" to "VIEW" after successfully posting data to MongoDB and receiving a 200 response status? I've tried different methods but haven't been ...

javascriptreactjsreact-hooksmern

Django and VueJS: Error 403 - Forbidden request due to missing or incorrect CSRF token

My tech stack includes Django and Django REST framework on the backend, along with Vue.js on the frontend. While GET requests function smoothly and POST requests using Postman or Insomnia work fine, encountering an error in the Browser console when sending ...

javascriptpythondjangovue.jscsrf

How can you refer to the current element in TypeScript when using jQuery's .each method?

Consider the TypeScript snippet below: export class MyClass { myMethod() { // ... $myQuery.each(function(idx, elm) { $(this)... // Original javascript code which obviously not correct in typescript } } } However, i ...

javascriptjquerytypescript

Collections of both letters and non-letter characters that are aligned

I am attempting to identify sets of characters that contain a mix of letters and non-letter characters, with many of them being just one or two letters. const match = 'tɕ\'i mɑ mɑ ku ʂ ɪɛ'.match(/\b(p|p\'|m|f|t|t ...

javascriptregex

Encountering error #426 in NextJs when the app is loaded for the first time in a new browser, but only in a

Encountering a strange error exclusively in production, particularly when loading the site for the first time on a new browser or after clearing all caches. The website is built using nextjs 13.2.3 and hosted on Vercel. Refer to the screenshot below: http ...

javascriptreactjsnext.js

How come my reducer isn't changing the state of my store with ImmutableJS?

I have the following code within my reducer: const copy_states = fromJS(state); const i_copy_jobs = copy_states.get('calendar_jobs').get(s_from_day_key).get(s_dept_id).get(s_job_id); let i_calend ...

javascriptreactjsimmutability

Store the values of the selected multiple radio buttons along with their unique IDs in an array

My goal is to map multiple options of radio buttons within a group, and when the user clicks on a radio button, I want to capture the selected values and unique IDs and add them to an array. Although my current code allows me to retrieve the value of the ...

javascriptreactjs

Elevate the value within a function and refresh the said function

I'm currently facing a challenge with this particular piece of code, let spin = new TimelineMax(); spin.to($('.particle'), 150, { rotation: 360, repeat: -1, transformOrigin: '50% 50%', ease: Linear.easeNone }); Th ...

javascriptajax

Incorporate child routes within a React component

I've been attempting to include <route> in a component within a routers component, but it doesn't seem to be working. Can anyone provide some assistance? My login page currently has a form and I'd like to switch that out with routes. ...

javascriptreactjsreact-routerreact-router-dom

Preventing file overwriting using fs.writefile method

Encountering an issue where the data being saved from a chat room built with socket.io in nodejs is constantly overwritten upon submission of a message. The desired outcome is to append both the username and message to the JSON file as an object, rather th ...

javascriptnode.jssocket.io

The store for WrappedApp was just initialized using withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined }

I am trying to create multiple routes with express and next.js. After running npm run export, I encountered the following message: next export info - using build directory: C:_PROJECT.next info - Copying "static build" directory info - Launching 3 wor ...

javascriptnode.jsreactjsnext.js

Is there a way to set a value within a jQuery function, and then invoke another function to utilize that value?

Suppose I have a function called isPercentage, which utilizes a value that is defined within the function it's being called in: isPercentage = function(){ if (value < 1){ value = value * 100; console.log(value); ...

javascriptjquery

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

Switching to a different view in a React Native application

I am encountering difficulties while navigating between pages in my React Native application. Whenever I try to use the button, an error message pops up saying: TypeError: undefined is not an object (evaluating '_this.props.navigation'). My app c ...

javascriptreactjsreact-native

What is the best way to find the average time in Typescript?

I am dealing with an object that contains the following properties: numberOfReturns: number = 0; returns_explanations: string [] = []; departure_time: string = ''; arrival_time: string = ''; The departure_time property hold ...

javascriptreactjstypescriptmomentjs

Is there a way to eliminate the border surrounding every cell in a table?

I'm facing an issue with a table on a page with a gray background. The challenge is to remove the borders of the cells in the table. <table width="510"> <tbody> <tr> <td style="background-color: #fff;" colspan="2" width="510"> ...

htmlcsscss-tables

Using Angular 2 for two-way binding with input masking

Encountering an issue with ng2 and inputmask. Here is the code snippet that's causing trouble: <div class="form-group col-sm-7"> <label class="control-label" for="sender-phone">Phone *</label> <input type="text" [(ngModel) ...

javascriptangularjsangularjquery-inputmaskangular2-ngmodel

Invoke the function for every element during the mapping process

I am attempting to call a function in React Native maps for each element. This function will randomly determine properties of the rendered component, making sure that each component is unique. The renderComponent function takes an argument called item as w ...

javascriptreactjsreact-native

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu