EdrinBasha EdrinBasha - 2 months ago 7
CSS Question

Show full content if div is fixed

hello here i have to long div-s first div is fixed and i want to show all elements of div 1 when user scrolls (because i have full elements on div 1) how can i do this ???

thanks in advance all

<div style="display: block; width: 100%;">

<div style="float: left; position: relative; z-index: 0;">
<div style="position: relative;">
<div class="content" style="padding-top: 10px; top: 10px; position: fixed;">

<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
<div style="margin-top: 10px;">MENU</div>
Show element after user scrolls

</div>
</div>
</div>

<div style="float: left; margin-left: 11%; width: 67%;">

Right DIV FUll LONG TEXT

</div>

</div>

Answer

Just check this out. I think just in you fixed content block you have to add some height then give overflow scroll.

<div style="display: block; width: 100%;">

    <div style="float: left; position: relative; z-index: 0;">
        <div style="position: relative;">
            <div class="content" style="padding-top: 10px; top: 10px; position: fixed;overflow-y: scroll;height: 186px;">

                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
                <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
            <div style="margin-top: 10px;">MENU</div>
                Show element after user scrolls

            </div>
        </div>
    </div>

    <div style="float: left; margin-left: 11%; width: 67%;">

        Right DIV FUll LONG TEXT

    </div>

Comments