Avatar of Rocking
Rocking
 asked on

Fix header within a div

Hi,

I have a div which will be having data populated from the server side.
I have to display heading in this div and the contents(coming through ajax) below the heading.

Heading is fixed and the contents are scrollable

Can it be possible in a single div?
HTMLCSS

Avatar of undefined
Last Comment
Md Shah

8/22/2022 - Mon
Kyle Hamilton

yes. inside your single div will be the heading. "append" the data from your ajax request to this div.
Rocking

ASKER
can u please provide a sample code  ?Assuming "    My Heading" should be fixed and rest contents scrollable

<div style="width: 800px;border: solid 1px;">

<div style="float: left; width: 200px; margin-right: 5px; background-color: red;overflow: scroll;height: 100px;">
    My Heading
    
    This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
       This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
    This is our left text column.
</div>


</div>

Open in new window

Md Shah

Hello Rocking, Once Again..

I haven't got any information from your question that whether you are trying to get only normal content from server with Ajax request or you are trying to populate a table content inside scrollable div.

Anyways, you can try to separate the header from the content: http://jsfiddle.net/u2xZU/ and put the header outside the scrollable content.

Basically, use two tables, one for the header and one for the content:

<div>Some Page Content </div>
    <table>
            <thead>
                <tr>
                    <th>Head1</th>
                    <th>Head2</th>
                    <th>Head3</th>
                </tr>
            </thead>
    </table>
    <div style="max-height: 200px; overflow: auto;">
        <table id="test">
            <tbody>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
                <tr> <td>content</td> <td>content</td> <td>content</td> </tr>
            </tbody>
        </table>
    </div>
<div>Some Page Content </div>

Open in new window

Please let me know if you have any other issues.

Happy Coding..
Accept my solution, if I have resolved your issue :)
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Rocking

ASKER
i don't want to use tables
Something like below code,still working on it :)


<HTML>

<HEAD>
   <script src="js/jquery-1.10.2.js"></script>
    <title>Scroll Fixed </title>
<style type="text/css">

#header{
width: 200px;
height: 300px;
overflow: scroll;
}
</style>
<SCRIPT>


$(document).ready(function() {
 
    var div = $('#header');
    var start = $(div).offset().top;
 
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });
 
});
</SCRIPT>
</HEAD>
<BODY>
 
<div id="header">
    <h1>Fixed HEader</h1>
</div>
 
<p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
<p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
 
</BODY>
</HTML>

Open in new window

Md Shah

Hmm.. In the question you have mentioned that you want a scrollable DIV with fixed header but in your last comment you were trying to write a code to scroll a Page with fixed header div.

Anyways, I have done small changes in your code as below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <title>Scroll Fixed </title>
    <style type="text/css">

    #header{
    width: 100%;
    height: 100px;
    background-color:#FFFFFF;
    }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {

            var div = $('#header');
            var start = $(div).offset().top;

            $.event.add(window, "scroll", function () {
                var p = $(window).scrollTop();
                $(div).css('position', ((p) > start) ? 'fixed' : 'static');
                $(div).css('top', ((p) > start) ? '0px' : '');
            });

        });
    </script>
</head>
<body>
    
    <div id="header">
        <h1>Fixed HEader</h1>
    </div>
 
    <p>Some dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
    <p>Some more dumb text to add scrolling in page <br/><br/><br/><br/><br/></p>
 
</body>
</html>

Open in new window

Check & let me know if this is what you are expecting..

or else please feel free to provide some more information about your question - about what exactly you are trying to do or get output look a like.. :)
Md Shah

A small Advise, if you are interested to know !!

When you are posting a Question, try to allocate maximum marks 500 instead of 100 or 265, so as to attract more Experts to your question & also to get a quick response or resolution.

Most of the Experts in their filter try to search with questions which are allocated to 500 points. In such scenarios, your question will not be visible to these Experts.

Benefit on both sides.. Think about it.. :)
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Rocking

ASKER
Yes you are right the code i provided was scroll a Page with fixed header div.
I don't need this,what i need is

A div which is having a fixed header below is what i need

http://jsfiddle.net/b4fEE/12/

but in the above fiddle two different div are used, i want in single div..
ASKER CERTIFIED SOLUTION
Md Shah

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.