Menu icon Foundation
Fixed Position <div> to allow scrolling beneath

I have an e-commerce product listing page that has a Search/Pagination section at the top of the page for the user to find and navigate through the list of products for the search result. I need to make this utility fixed at the top of the page so the user can scroll through a long list of products but still have convenient access to the Search/Paginiation features.

I currently have the Search/Pagination wrapped in a div and the product listing in its own div so they can easily be addressed with ids or classes. Both divs are built on the Foundation grid and behaving responsively as expected.

Does Foundation provide a class/javascript to "fix" a section of content and allow the content beneath it to scroll? If not, is there something already developed that would do the trick?

Sozo   store   wright check corporate wellness solutions

fixedscrollingdiv

I have an e-commerce product listing page that has a Search/Pagination section at the top of the page for the user to find and navigate through the list of products for the search result. I need to make this utility fixed at the top of the page so the user can scroll through a long list of products but still have convenient access to the Search/Paginiation features.

I currently have the Search/Pagination wrapped in a div and the product listing in its own div so they can easily be addressed with ids or classes. Both divs are built on the Foundation grid and behaving responsively as expected.

Does Foundation provide a class/javascript to "fix" a section of content and allow the content beneath it to scroll? If not, is there something already developed that would do the trick?

Sozo   store   wright check corporate wellness solutions

This post has been closed. No new replies can be added.

Bob Sawyer over 4 years ago

Just apply position:fixed; top:10px; (or whatever top position offset you'd like to use) to the containing <div> in your CSS.

FoundationDeck over 4 years ago

You could also use a inbuilt class called fixed. See this link here http://foundation.zurb.com/docs/components/topbar.html

Jay Todtenbier over 4 years ago

Excellent! Foundation class="fixed contain-to-grid" did the trick.

Jay Todtenbier over 4 years ago

Thank you Bob. Got the desired "stick". Put the css in a style tag till I get this stable. Had to add a background color and z-index to prevent the product data from being seen as it scrolls behind the Search div.

Seems to have moved the Search/Pagination div to "fixed flush left margin" loosing the standard grid row responsive behavior (row centers on page with margin and padding left/right. that the product listing div below still retains. Resizing the browser to wide keeps the Search div flush left so as Products remain centered in their row div. As a result the right side of the product div "bleeds through" the right side of the Search div.

Suspect this will might take some trial and error to figure out but wanted to see if perhaps someone else has already figured this out.

Link to page below:

http://wrightcheck.com/sozo/products/?keyword=&limitby=20&orderby=brand_product_name

<div class="row show-for-medium-up" style="position:fixed; top:95px; background-color: white; z-index: 10;">
<!-- <div class="row show-for-medium-up">  -->

  <div class="small-12 columns">
    <?php //lorem_ipsum(4); ?>
    <?php require('../php/product_search_navigation_header.php'); ?>    
  </div>
</div>

Bob Sawyer over 4 years ago

Good to know!