Fixed positioning on scroll on the right side

I need assistance to create a fixed right side with scrollable content on the left. I attempted using position: fixed for the left div but it didn't work as expected. Can someone please assist me with this? Link to the product

Answer №1

If you were to make it fixed, it could still obscure other content on the page. I would have offered assistance, but the content on the right side might cause usability issues for your users. Instead, consider having an add to cart button appear at the bottom of the page when the user scrolls down.

Since you are utilizing JQUERY, I recommend checking out a tutorial on how to detect when a user scrolls down the page here, and then displaying your footer panel accordingly. I have provided a preview of my suggestion below:

https://i.sstatic.net/c9zPx.png

This should remain fixed at the bottom of the window only during scrolling.

Additionally, I have a JavaScript-based method for tracking scrolls that you may find useful. You can learn more about it 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

Is there a way to convert datetime format to date in a Vue component?

With my Vue component set up like this: <template> ... <td>{{getDate(item.created_at)}}</td> ... </template> <script> export default { ... methods: { getDate(datetime) { ...

How to vertically center a div within a parent div with a fixed position?

I am facing an issue where I have a div positioned on top of another fixed position div, and I am looking for a way to vertically align the first div. Below is the code snippet that I am currently working with: <div class="overlay"> <div id=" ...

Leveraging Javascript/Jquery for numbering items in a list

This is a snippet of HTML code that I am working with: <ul> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data-slide-to="0" data-target="#myCarousel" class="appendLi"></li> <li data ...

ASP.NET - Severely struggling with connectivity issues involving AJAX/JQUERY

I have developed a real-time update script that refreshes certain div elements with server-side information every second. The issue I am facing is that the script seems to be causing heavy usage, as even my mouse animation in Google Chrome keeps loading. ...

Django's "Like" feature with AJAX interaction (duplicate)

Trying to add a like button to my project without reloading the page has been a challenge. I turned to AJAX in JS based on my research, but I'm clueless when it comes to Javascript. Can someone take a look at my code and help me out? Or maybe t ...

Having trouble removing a file with AJAX/php

When attempting to remove a file using PHP alone, the deletion process works smoothly. But when utilizing AJAX code, nothing happens. Below is the code snippet with AJAX implemented. index.php => <form method="post" action="include/delete.php" id="d ...

What exactly is AJAX timeout measuring?

In my code, I have implemented multiple jQuery and AngularJS AJAX calls with timeout values like the following example (jQuery): $.ajax({ url: url, type: "POST", dataType: "xml", timeout : 5000, data: data }); And another example usin ...

Is it possible to smoothly switch between two states using just a single animation class?

I am trying to trigger an animation with a single class, and then have that animation play in reverse when the class is removed. To better explain, I have created a CodePen example of my current progress. In the CodePen, you can see that when the class . ...

Implement horizontal scrolling in a div using JavaScript or jQuery when clicked

After spending the past couple of days searching for a simple javascript or jquery code, I am determined to add a horizontal scrolling div to showcase images and descriptive text on the work page of my web portfolio. I came across a glide-onclick scrollin ...

Retrieving JSON data from a form with the help of Angular

In my application, I have various forms that are too large to manually create JSON keys with Angular controllers. I am looking for an automated solution to generate JSON from these forms in a simple structure like {"key":value,"key":value,...}, but the pro ...

How come Font-face isn't functioning properly on Internet Explorer 11?

I have designed a new website at , however, I am facing issues with my CSS on Internet Explorer 11 (version 11.608.15063.0). The font-face and dropdown menu are not displaying correctly. Can anyone assist me with this problem? ...

Creating a table that adapts to different screen sizes using

I'd like to set up a layout where an input element is next to a button, occupying the entire width of the container. Perhaps using a table would be the way to go. In my HTML and CSS setup, I have the following: .css-table { display: table; } ...

Using SetInterval function in conjunction with jQuery's .each() method

I'm looking to cycle through a group of divs and perform random actions at various intervals. I'm trying to use the function below, but the console.log always returns the same object and integer for each iteration. What would be the correct way t ...

Leveraging TYPO3 Fluid for dynamic template rendering

I am currently developing an extension using EXTbase and fluid for TYPO3 v7+. I have encountered a situation where I need to render my fluid templates based on certain controller conditions. Under a specific condition, I want to include HTML code from a us ...

Show a collection of titles for unique post types

I am currently showcasing a custom list of post types using the following code: <!-- Displaying post type list --> <?php $args = array( 'post_type'=>'artworks_post', 'title_li'=> __(&apo ...

The placeholder tags in the input box are not aligning correctly with Bootstrap 3.2

Can someone help me figure out how to make the placeholders in my input box for the dates fit properly? I've been trying to adjust the bootstrap code but haven't been successful. I have attached a screenshot of the issue. Below is the code snip ...

What is the best way to duplicate and delete the final child element using jQuery?

Can someone help me troubleshoot this code that is supposed to clone and remove the last child of a ul element? It doesn't seem to be working as expected. $(document).ready(function () { var tmp1 = ''; var tmp = '<ul>< ...

I am struggling to access the input file data in my controller while attempting to send it over AJAX

Currently, I am utilizing Laravel 3 and incorporating a user comment via AJAX. The issue I'm facing is related to adding images to the comment, as I am encountering difficulty getting the File Data to pass through. Moreover, when I set processData to ...

PHP form for submitting image uploads

Having trouble uploading an image to a directory due to a form issue. After submitting the form, it gets redirected to the specified PHP file in the form action but doesn't seem to recognize that the form has been submitted. Check out the HTML code: ...

Enhancing user experience with jQuery tooltips

Having trouble adding a tooltip to a glyphicon. The JSFiddle example provided does not work for me as I am using jQuery to create the HTML elements like this: var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash'); How ...