When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart

The cart is supposed to stick to the right edge and scroll up and down on the page

Everything seems to work, but there's a slight issue when I click on Add 1 and Add 2, the items are added to the cart, resulting in the following layout:

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

I highlighted the empty space in red because it should always be preserved. However, when scrolling down and the cart intersects with the blue block, this space disappears, which shouldn't happen

What could be causing this problem? The main script is implemented within the VPDetail function

let VPDetail = {
    init: function () {
        let _self = this;
        $(window).resize(function () {
            _self.positionContainer();
        });

        $(window).scroll(function () {
            _self.positionContainer();
        });

        _self.positionContainer();
    },
    positionContainer: function () {
        let rp = $(".js-real-position");
        let column = $('.js-column-to-scroll-block');
        let columnAdd = $('.js-column-to-scroll-block-additional');
        let sp = $(".js-static-position");
        let topDelta = 20;
        let top = topDelta;

        if (column.position().top + column.height() + columnAdd.height() - sp.height() < $(document).scrollTop() + topDelta) {
            top = column.position().top + column.height() + columnAdd.height() - sp.height() - $(document).scrollTop();
        }

        if ($(document).scrollTop() + topDelta > rp.position().top) {
            sp.css({top: top + 'px', 'position': 'fixed'});
        } else {
            sp.css({top: '0', 'position': 'static'});
        }

        sp.width(sp.parent().width());
    },
}

$(function (){
    VPDetail.init();
})

$(".add1").click(function () {
  $('.add1').css('display', 'none');
  $('.added1').css('display', 'block');
});

$(".add2").click(function () {
  $('.add2').css('display', 'none');
  $('.added2').css('display', 'block');
});

$(".added1").click(function () {
  $('.added1').css('display', 'none');
  $('.add1').css('display', 'block');
});

$(".added2").click(function () {
  $('.added2').css('display', 'none');
  $('.add2').css('display', 'block');
});
.color-block {
    padding: 24px;
    background: #08e8de;
    border-radius: 10px;
}

.cart-block {
    padding: 24px;
    background: #8A2BE2;
    border-radius: 10px;
}

.add1, .add2 {
  height: 300px;
  cursor: pointer;
}

.added1, .added2 {
  cursor: pointer;
  height: 150px;
  display: none;
}

.package-detail-info {
  margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="row margin-block-small pt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <h1 class="h2"><strong>Package</strong></h1>
        <div class="vp-tickets js-vp-tickets">
            <div class="mb-3"></div>
            <div class="please-select-items alert alert-info"><i class="fa fa-info-circle"></i> Please select items</div>
            <div class="color-block mb-4" id="ticket-1">
                <div class="item">
                    <div class="add1">Add 1</div>
                </div>
            </div>
      <div class="color-block mb-4" id="ticket-2">
                <div class="item">
                    <div class="add2">Add 2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 js-column-to-scroll-block" style="">
        <div class="package-detail-info">
            <div class="js-real-position" style="">
                <div class="js-static-position static-position" style="top: 0px; position: static; width: 337.25px;">
                    <div class="vp-small-order-info cart-block mb-3">
                        <div class="js-selected-info"></div>
                        <div><small>Options:</small></div>
            <div class="added1">Added 1</div>
            <div class="added2">Added 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-block-small">
    <div class="col-12 col-md-8 col-lg-9 js-column-to-scroll-block-additional">
        <div style="height: 1000px; background: blue;"></div>
    </div>
</div>

javascripthtmljquerycss

Answer №1

Just provide the required information

.package-detail-info {
    position: relative;
    width: 100%;
    height: 100%;
}

.js-real-position {
    width: 100%;
    height: 100%;
}

.vp-small-order-info {
    width: 100%;
}

and it appears to be functioning correctly. Is this meeting your expectations?

Here is the updated version:

let VPDetail = {
    init: function () {
        let _self = this;
        $(window).resize(function () {
            _self.positionContainer();
        });

        $(window).scroll(function () {
            _self.positionContainer();
        });

        _self.positionContainer();
    },
    positionContainer: function () {
        let rp = $(".js-real-position");
        let column = $('.js-column-to-scroll-block');
        let columnAdd = $('.js-column-to-scroll-block-additional');
        let sp = $(".js-static-position");
        let topDelta = 20;
        let top = topDelta;

        if (column.position().top + column.height() + columnAdd.height() - sp.height() < $(document).scrollTop() + topDelta) {
            top = column.position().top + column.height() + columnAdd.height() - sp.height() - $(document).scrollTop();
        }

        if ($(document).scrollTop() + topDelta > rp.position().top) {
            sp.css({top: top + 'px', 'position': 'fixed'});
        } else {
            sp.css({top: '0', 'position': 'static'});
        }

        sp.width(sp.parent().width());
    },
}

$(function (){
    VPDetail.init();
})

$(".add1").click(function () {
  $('.add1').css('display', 'none');
  $('.added1').css('display', 'block');
});

$(".add2").click(function () {
  $('.add2').css('display', 'none');
  $('.added2').css('display', 'block');
});

$(".added1").click(function () {
  $('.added1').css('display', 'none');
  $('.add1').css('display', 'block');
});

$(".added2").click(function () {
  $('.added2').css('display', 'none');
  $('.add2').css('display', 'block');
});
.color-block {
    padding: 24px;
    background: #08e8de;
    border-radius: 10px;
}

.cart-block {
    padding: 24px;
    background: #8A2BE2;
    border-radius: 10px;
}

.add1, .add2 {
  height: 300px;
  cursor: pointer;
}

.added1, .added2 {
  cursor: pointer;
  height: 150px;
  display: none;
}

.package-detail-info {
  margin-top: 100px;
}

/* EDIT */

.package-detail-info {
    position: relative;
    width: 100%;
    height: 100%;
}

.js-real-position {
    width: 100%;
    height: 100%;
}

.vp-small-order-info {
    width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="row margin-block-small pt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <h1 class="h2"><strong>Package</strong></h1>
        <div class="vp-tickets js-vp-tickets">
            <div class="mb-3"></div>
            <div class="please-select-items alert alert-info"><i class="fa fa-info-circle"></i> Please select items</div>
            <div class="color-block mb-4" id="ticket-1">
                <div class="item">
                    <div class="add1">Add 1</div>
                </div>
            </div>
      <div class="color-block mb-4" id="ticket-2">
                <div class="item">
                    <div class="add2">Add 2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 js-column-to-scroll-block" style="">
        <div class="package-detail-info">
            <div class="js-real-position" style="">
                <div class="js-static-position static-position" style="top: 0px; position: static; width: 337.25px;">
                    <div class="vp-small-order-info cart-block mb-3">
                        <div class="js-selected-info"></div>
                        <div><small>Options:</small></div>
            <div class="added1">Added 1</div>
            <div class="added2">Added 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-block-small">
    <div class="col-12 col-md-8 col-lg-9 js-column-to-scroll-block-additional">
        <div style="height: 1000px; background: blue;"></div>
    </div>
</div>

Would you like to maintain that whitespace?

If so, simply add a min-height to .vp-tickets:

let VPDetail = {
    init: function () {
        let _self = this;
        $(window).resize(function () {
            _self.positionContainer();
        });

        $(window).scroll(function () {
            _self.positionContainer();
        });

        _self.positionContainer();
    },
    positionContainer: function () {
        let rp = $(".js-real-position");
        let column = $('.js-column-to-scroll-block');
        let columnAdd = $('.js-column-to-scroll-block-additional');
        let sp = $(".js-static-position");
        let topDelta = 20;
        let top = topDelta;

        if (column.position().top + column.height() + columnAdd.height() - sp.height() < $(document).scrollTop() + topDelta) {
            top = column.position().top + column.height() + columnAdd.height() - sp.height() - $(document).scrollTop();
        }

        if ($(document).scrollTop() + topDelta > rp.position().top) {
            sp.css({top: top + 'px', 'position': 'fixed'});
        } else {
            sp.css({top: '0', 'position': 'static'});
        }

        sp.width(sp.parent().width());
    },
}

$(function (){
    VPDetail.init();
})

$(".add1").click(function () {
  $('.add1').css('display', 'none');
  $('.added1').css('display', 'block');
});

$(".add2").click(function () {
  $('.add2').css('display', 'none');
  $('.added2').css('display', 'block');
});

$(".added1").click(function () {
  $('.added1').css('display', 'none');
  $('.add1').css('display', 'block');
});

$(".added2").click(function () {
  $('.added2').css('display', 'none');
  $('.add2').css('display', 'block');
});
.color-block {
    padding: 24px;
    background: #08e8de;
    border-radius: 10px;
}

.cart-block {
    padding: 24px;
    background: #8A2BE2;
    border-radius: 10px;
}

.add1, .add2 {
  height: 300px;
  cursor: pointer;
}

.added1, .added2 {
  cursor: pointer;
  height: 150px;
  display: none;
}

.package-detail-info {
  margin-top: 100px;
}

/* EDIT */

.package-detail-info {
    position: relative;
    width: 100%;
    height: 100%;
}

.js-real-position {
    width: 100%;
    height: 100%;
}

.vp-small-order-info {
    width: 100%;
}

/*EDIT2 MINHEIGHT*/
.vp-tickets {
    min-height: 810px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referre...

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

Exploring ways to utilize removeEventListener in React Native

Can someone assist me with converting this code to React? I am new to using React and struggling with the implementation. Thank you in advance! <progress id="bar" value="0" max="110"></progress> <button onClick={i ...

javascriptreactjs

Revamp the angular design of the mat-tree UI bottom border line issue

Can you help me with changing the direction of the mat tree from right to left? I need to remove the bottom border, please refer to the image here ...

javascripthtmlcssangularsass

Safari shows a contrasting outcome

Having an issue with compatibility in the safari browser You can check out the site here: The problem lies with the text inside the image, I want it to display properly like it does in Chrome. Here is the desired result for Safari as well. Below is the ...

htmlcsssafariintegration-testing

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

javascriptjqueryioshtml

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

The vertexUv in three.js is currently undefined and needs to be

I'm currently facing an issue while trying to combine multiple meshes, one of which is created by inputting the vertices coordinates. This specific mesh is causing the following error: THREE.DirectGeometry.fromGeometry(): Undefined vertexUv 256 W ...

javascriptthree.js

Creating a custom backdrop for your kaboom.js webpage

I created a kaboom.js application and I'm having trouble setting a background for it. I've searched online extensively and attempted different methods on my own, but nothing seems to be working. (StackOverflow flagged my post as mostly code so I ...

javascripthtmlcsskaboom

What is the best way to implement a string method in the MVC5 controller via Ajax without causing the view to refresh?

Hello there. I am seeking some assistance with a void deletephoto method in my productmasters controller. Here is the code snippet for that method: [HttpPost] [ValidateAntiForgeryToken] public void DeletePhoto(ProductMaster productMaster,strin ...

jqueryajaxasp.net-mvc

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

Is there a period, question mark, apostrophe, or space in the input string?

Currently, I am in the process of developing a program that can determine if an input string includes a period, question mark, colon, or space. If these punctuation marks are not present, the program will return "false". However, if any of them are found, ...

javascript

use the fetch api to send a url variable

I'm struggling to pass a URL variable through the API fetch and I can't seem to retrieve any results. As a newcomer to Javascript, any help is greatly appreciated. //Get IP address fetch('https://extreme-ip-lookup.com/json/') .then(( ...

javascriptjson

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

I am facing a challenge in sending a complex object from Angular to my web API. Here is how the object looks: { Name: "test", Tax: 23, Addresses: [ { country: "ro", city: "bucharest" }, { country: "fr", ...

javascriptc#asp.netangularjsasp.net-mvc

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

javascriptjqueryhtmlcss

Adding color to characters, digits in an HTML file

Is it possible to individually style each letter, number, and symbol in an HTML document with a unique color? I am interested in creating a text editor that applies specific colors to each glyph for those who have grapheme-color synesthesia. While there ar ...

javascripthtmlcssreactjsreact-native

Leveraging Vue.js's capabilities with an external setup file

Is it feasible for a Vue App to access an external configuration file? I envision a setup where I deploy the application along with the config file; then, I should be able to modify the configuration in the external file without needing to rebuild the enti ...

javascriptvue.jswebpackconfiguration-files

jquery selector for elements inside of 'this'

I'm attempting to style the paragraph element within a specific selected element using CSS. I attempted surrounding the 'p' in quotes within the selector, but it did not have any effect. $('#characterSelect div').on('click&ap ...

jquery

Is there a way for me to figure out if a Primefaces RadioCheckbox has been selected?

Despite the numerous examples available on how to count checked checkboxes, I am facing difficulties in getting it to work. My goal is to enable a button when at least one checkbox is checked on the page, and disable it when none are selected. However, n ...

javascriptjqueryprimefaces

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

pythoncssjsonweb-scrapingscrapy

Reloading the React/Laravel application causes the app to crash and display a blank page

My current setup involves a react application running on the Laravel 5.4 framework. The problem I'm facing is that whenever I refresh a page with a URL structure like {url}/{slug}, it causes issues within the application. Within my App.js file, here ...

javascriptphpreactjsreact-routerlaravel-5.4