sideScroll

fixed header Scrolling results

by Dan Wright

HTML

<div id="content">
    <div class="test">
        <div class="banner">Main Header</div>
        <div id="serach_results">
            <div class="resultsView">
                <div class="search-header">
                    <div class="section-title">Title</div>
                    <div class="search-results-header">Products / Desc / etc</div>
                </div>
                <div class="results">
                    <div class="scrolling">
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div class="result2">Result 2</div>
                        <div class="result3">Result 3</div>
                        <div class="result4">Result 4</div>
                        <div class="result1">Result 1</div>
                        <div...

CSS

body { /* Do not use */ margin: 0; padding: 0; }
#content { /* Do not use */ }
.test { /* Content Wrapper */ height: 100%; min-height: 100%;}
.banner { /* Do not use */ background-color: pink; height: 75px; }
#search_results { /* Results View Outer Wrapper */ }
.resultsView { /* Results View Inner Wrapper */ }
.search-header { /* Do not use */ }
.section-title { /* Do not use */ background-color: green; }
.search-results-header { /* Do not use */ background-color: pink; }
.results { /* Results Wrapper */ position: fixed; overflow-y: scroll; width: 100%; height: 100%;}
.scrolling { /* Results Scroll Wrapper */ }

/* Search result stylings */
 .result1, .result3 { background-color: yellow; }
.result2, .result4 { background-color: orange; }

JavaScript

$(window).on('resize', function(){
// Total height
var height = $(document).height();
console.log(height);
// Combined height of headers
var headerHeight = $('.banner').height();
var titleHeight = $('.search-header').height();
var totalHeight = headerHeight + titleHeight;
console.log(totalHeight);
// Search results avaliable height
var remaining = height - totalHeight;
console.log(remaining);

$('.results').css({"height": remaining});
}).resize();