Why fixed div comes out when horizontally scrolled?

» javascript » Why fixed div comes out when horizontally scrolled?

By : Bart van Raalte

Date : December 01 2020, 05:00 PM

Hope this helps First things first:
Per http://www.w3.org/TR/css3-positioning/#fixed-pos

code :

$(window).scroll(function () {
    ...
    var winleft = $(window).scrollLeft();
    if (windowpos >= pos.top) {
        ...
        s.css({'left': -(winleft)});
...

Share :

How can I get how much a div is horizontally scrolled jquery

By : YatinS

Date : March 29 2020, 07:55 AM

wish help you to fix your issue It's the window that you're scrolling, not the div.
Here's an interactive example: http://jsfiddle.net/pjWt7/1/

code :

<p>Scrolled: <span>0</span>px</p>
<div class="divImagem" style="position:relative; width: 1424px; height: 790px; overflow:hidden;">

$(window).scroll(function () {
    console.log("scrolling");
    var scrollLeft = $(this).scrollLeft();
    $("span").html(scrollLeft);

})

How to position a div element only after having scrolled horizontally?

By : user3050180

Date : March 29 2020, 07:55 AM

This might help you Try replacing 1920 with "window.innerWidth". Thats a JS DOM variable for the width of the browser window.

Semantic UI Table How to make right column to be fixed when scrolled horizontally

By : user3358886

Date : March 29 2020, 07:55 AM

I wish did fix the issue. like this?
I have just added position:sticky; and right:0;, top:0; to the ::last-child of td.

code :

.ui.table tr td:last-child {
    position: sticky;
    right: 0;
    top: 0;
    background: #333;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui segment" style="padding: 0px; overflow-x: scroll;">
    <table class="ui selectable single line compact table slide down visible transition">
        <thead class="">
            <tr class="left aligned">
                <th class="">Name</th>
                <th class="">Type</th>
                <th class="">Percent</th>
                <th class="">Value</th>
                <th class="">Max Value</th>
                <th class="">Begin Date</th>
                <th class="">Expired Date</th>
                <th class="">Selected Product?</th>
                <th class="">Priority</th>
                <th class="">ezPay Available?</th>
                <th class="">merchant Available?</th>
                <th class="">All Merchant?</th>
                <th class=""></th>
            </tr>
        </thead>
        <tbody class="">
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">fwfewfwe</td>
                <td class="">Default Test</td>
                <td class="">12</td>
                <td class="">0</td>
                <td class="">90000</td>
                <td class="">2019/10/26 15:05</td>
                <td class="">2019/10/26 15:05</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">123</td>
                <td class="">Default Test</td>
                <td class="">0</td>
                <td class="">69000</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:43</td>
                <td class="">2019/10/21 14:43</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
            <tr class="" style="background: rgb(255, 89, 0);">
                <td class="">grgrb egeh</td>
                <td class="">Default Pulsa Rule Cashback</td>
                <td class="">0</td>
                <td class="">43545345</td>
                <td class="">0</td>
                <td class="">2019/10/20 14:45</td>
                <td class="">2019/10/30 14:45</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">1</td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
                <td class="">
                    <div class="ui buttons">
                        <button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
                        <button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

position: fixed (but when scrolled down to the fixed content)

By : hpasweden

Date : March 29 2020, 07:55 AM

seems to work fine You might want to try jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/). I don't think you can achieve this with CSS alone because you are changing its behavior based upon user interaction. You'll need some Javascript.