CODEWITHSUNDEEP
jqueryhtmlcssasp.netscroll
techspider
techspider

Reputation: 3410

Changing Position of DIV on Scroll

I have a table 

<table>
<tr> <td> ---- asp.net gridview </td>
<td> <div class=persondetails> </div> </td></tr>
</table>

My javascript got from another forum article

<script language="javascript" type="text/javascript">
        var personDetail = document.querySelector('.persondetails');
        alert (personDetail);
        var origOffsetY = personDetail.offsetTop;
        debugger;
        function onScroll(e) {
            debugger;
            window.scrollY >= origOffsetY ? personDetail.classList.add('sticky') :
                                            personDetail.classList.remove('sticky');
        }

        document.addEventListener('scroll', onScroll);
    </script>

My asp.net gridview grows vertically depending on the no. of persons. When a person on the grid is selected, the div on the second td is populated with some fields. It works fine.

When the list grows too large, and I have to select a person at the bottom, the person details on the right side is shown at the top. This makes users to scroll up to see the details of the person selected in the grid at the bottom of the page.

Is there a way to show the div on the right side td to scroll down when users scroll down the page? I checked other links on this forum but didn't work out. I'm not sure if this due to my table and td layout.

I get null at the alert specified.

Upvotes: 0

Views: 7050

Answers (2)

Diego
Diego

Reputation: 16714

You should use a position fixed like this:

var $details = $(".details"),
    detailsPos = $details.position().top;
$(window).on("scroll", function() {
    if ($(window).scrollTop() > detailsPos)
        $details.css("position", "fixed").css("top",0);
    else
        $details.css("position", "static");
});

Working example.

Note that the code should be wrapped in document ready like this:

$(function() {
    // ... code ...
});

Also check position fixed compatibility here

Upvotes: 3

haraman
haraman

Reputation: 2742

The better approach would be to use CSS styled divs.

  • You may set your right div to always show on scrolling e.g. sticky divs or
  • You may wrap your grid view in a div with fixed height so that your left table scrolls in that div within the view port.

Upvotes: 0

Related Questions