"Sticky Top Button That Stays in Place When Scrolling | Innovative CSS & jQuery

I've been inspired by the "Proceed to checkout" button on amazon.com and I want to recreate it. However, I'm facing a challenge as their website is not responsive and I can't find a way to view a device user agent in Chrome. To see what I'm aiming for, you'll need to check it out on your smartphone, but here's the concept.

My goal is to create a scrolling sticky button. Initially, when a user lands on the page, they will see a "buy now" button at the bottom of the screen. As they scroll up and the button reaches the top of the page, I want it to stick there while they continue to scroll down. This is specifically for mobile view (responsive design).

You can see my progress so far in this JSFIDDLE.

I believe that using jQuery's .scrollTop() method will be key in achieving the desired effect.

javascriptjquerycss

Answer №1

Give this a shot:

$(window).scroll(function(){
  var element = $('#element');
  if($(window).scrollTop() > 300) {
    element.css({position:'fixed', bottom:'10px'});
  }
  else{
    element.css('position', 'static');
  }
});

JSFIDDLE LINK

Make any necessary adjustments. Ensure that, as you've already done, your container has a position:relative;. If you want it to apply to the entire page, set body{position:relative;} in your CSS. The positioning will be based on this. Static is the default position for every Element.

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

Using knockout to retrieve the attribute value with an onClick event

Snippet of HTML View with attribute value 'Qref'. This is the sample HTML Code for binding Currently, I have manually inputted the Qref Attribute value <!--ko if:$parent.Type == 2 --> <input type="checkbox" data-bind="attr:{id: $data ...

javascriptjqueryknockout.js

The issue I am facing with this self-closing TITLE tag causing disruption to my webpage

I am encountering a problem with my basic webpage. <html> <head> <title/> </head> <body> <h1>hello</h1> </body> </html> When viewed in both Chrome and Firefox, the webpage ...

csshtml

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

After developing the JavaScript functionality for this contact form, below is the HTML structure without any CSS styling included: <!-- Contact Form --> <div class="cws-widget"> <div class="widget-title" style="color:#fec20b;">S ...

javascriptphpjqueryajax

Incorporate a JavaScript form into a controller in MVC4

I'm facing an issue where I need to trigger a JavaScript function from within a controller method in my project. Here is the code snippet that I am using: Public Function redirectTo() As JavaScriptResult Return JavaScript("ToSignUp()") E ...

javascriptvb.netasp.net-mvc-4

Enhance dynamically generated HTML using jQuery Mobile

Using jQuery Mobile version 1.2.0 I am dynamically generating HTML using JavaScript ($(selector).html(content)), adding it to the DOM, and then displaying it ($.mobile.changePage()). After that, I make an AJAX call, retrieve some data, and re-generate th ...

javascriptjquery-mobile

Obtaining zip files using AngularJS

Upon entering the following URL in my browser, I am prompted to download a file: My goal is to download this file using an AngularJS HTTP request. I have created a factory for this purpose, but unfortunately, the download is not successful. Even though ...

javascriptajaxangularjs

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

Tips on Avoiding Connection Timeouts in jQuery AJAX

Currently, I am encountering an issue with a connection time out during a jQuery ajax operation. The situation is that when I send an ajax request, it takes too long to be processed by the server (about 5 minutes). To address this delay, I have implemented ...

jqueryajaxspringtimeoutconnection

What is the best way to apply a :visited selector specifically to the most recently visited webpage?

I've noticed that all the pages I've visited on the site have now changed to the color I chose. However, my goal is for only the last page I viewed to be in the color I assigned. Thank you! ...

htmlcssdreamweaver

Modifying numerous array keys/names in JavaScript

Alright, I have an array named arrayObj containing three objects: arrayObj[0], arrayObj[1], and arrayObj[2]. All of these objects have the key name["user"] repeated three times. To change these key names using a function, here's what I've come up ...

javascriptarraysobjectkeyunderscore.js

methods for performing multiplication on dynamically inserted variables using jquery

I'm trying to dynamically calculate the total amount based on the price and product quantity after changing the value in the #quantity text-box. I implemented the following solution, but upon checking the Firefox console, I noticed that there is no ca ...

javascriptjqueryonchange

Encountering npm error code ERR_SOCKET_TIMEOUT while attempting to generate a React application

Every time I attempt to create a React app using the command: npx create-react-app chat-app I encounter this error message: Error I have attempted various solutions in an effort to resolve the error: To check if I am behind a proxy, I ran the following ...

javascriptnode.jsreactjsnpmnpm-install

Is there a way to customize the CSS of a Bootstrap 4 data table

I recently incorporated a library from Bootstrap Datatables into my project. However, I'm having trouble modifying the CSS for the search bar and 'Excel' button. Is there a way for me to customize it with my own CSS? https://i.sstatic.net/x ...

htmlcssbootstrap-4datatables

The .media object in Bootstrap 3 does not experience overflow issues with .dropdown elements

Dropdown menu not displaying fully https://i.sstatic.net/G38cL.png I have a dropdown menu but it seems to cut off halfway through displaying its content. <div class="media-body"> <h4 class="panel-heading" style="margin:0;"> <div ...

htmlcsstwitter-bootstrap

Using an `<img>` element as an event handler in a JavaScript function

I'm having trouble setting up a click handler for the search field in my project. I've tried using on() with an img or class, but it's not working as expected. When adding the image using the code below: jQ('#psc').append('&l ...

javascriptjqueryfunctiononclickevent-handling

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascripthtmlcssangularjs

Angular 6 is experiencing an issue with the functionality of the file toggle JS

Currently, I am utilizing the file toggle.js within the Urban theme. In the HTML chatbox, using the img, the file toggle.js is hardcoded and is functioning properly. However, when implementing code in Angular 6, the toggle.js is not functioning as expecte ...

javascriptangulartypescriptangular6

What causes the discrepancy in smoothness between the JavaScript animation when offline versus its choppiness when online, particularly on AWS

Recently I delved into game development using HTML5/CSS/JS and embarked on a small project. Check out the game here at this AWS storage link: If you open the game and press SPACE, you'll notice that the ball starts moving with occasional brief pauses ...

javascripthtmlanimationamazon-web-servicessmoothing

How can I use JavaScript or CSS to identify the specific line on which certain words appear in the client's browser?

Imagine I have the following HTML structure: <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor ...

javascriptjqueryhtmlcssline