Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Freeze question text in header 1 on screen

Hello,

I would like to show a series of questions on 1 page which causes downward scrolling.  I have a concept description in the header 1 area which I would always like to be visible no matter how far the respondent scrolls down.
Any help on how to freeze the header 1 section would be much appreciated.
cheers,
Paul
asked Nov 3, 2016 by PaulKallis (400 points)
The code in Paul's link is useful, but you may be able to do this more simply as you're not dealing with tables or anything.  Setting the CSS to use a fixed position will make the header 1 text scroll down the page:

<style>
#Q1_div > .header1 {
    position: fixed;
}
</style>


This can easily lead to overlapping elements, though.  What do you want to happen when the header 1 text begins to overlap with other items on the page?
Thanks for your  help. This code is useful.
The CSS does cause my header 1 and header 2 to overlap. What I'm trying to replicate relates back to what you helped me with a couple of weeks ago. In the website below: http://funbobulator.budgetallocator.com/#ba
you can see that as you scroll through the different equipment, the pane to the right stays visibile. I'm trying to do something similar but was hoping to always have the header 1 text visible and as you scroll down the page, the questions disappear underneath the header 1 element.
cheers,
Paul

1 Answer

0 votes
Paul,

I'm not sure this is the best way to do it, but see below.  It is a bit involved.  Essentially you add a class to the header that fixes it to the top of the screen when they scroll down the page.  The "#q1_div .header1" will have to be modified to match your question name.  

<style>
   
    .fix_header
    {
        position: fixed;
        top: 0;
    }

</style>

<script>
    $(document).ready(function()
    {
        var header1 = $("#q1_div .header1");
        var header_position = header1.position().top;
   
        $( document ).on("scroll", function()
        {
            var scroll_position = $(document).scrollTop();
           
            if(scroll_position > header_position)
            {
                $("#q1_div .header1").addClass("fix_header");
            }
            else
            {
                $("#q1_div .header1").removeClass("fix_header");
            }
        });
    });
   
</script>
answered Nov 5, 2016 by Justin Luster Silver Sawtooth Software, Inc. (5,495 points)
Thanks Justin,
This worked, I head to tweak the css slightly as the  header1 div was transparent and overlapped with question text once scrolling. See below.
cheers,
Paul
.fix_header
    {
        position: fixed;
        top: 0;
        height: 200px;
          width: 100%;
          background-color: rgba(255,255,255, 0.9);
    }
...