Scroll Collapse and Fix

gistfile1.txt

/* Scroll and collapse box on view-pages of item */
var st = 51;
function updatePersistBox() {
   $(".persist-area").each(function() {   
        
        var el             = $(this),
            offset         = el.offset(),
            scrollTop = $(window).scrollTop() + st,
            floatingBox = $(".floatingBox", this)
        // && (scrollTop < offset.top + el.height())      
        
        if ((scrollTop > offset.top)) {
            floatingBox.parent().next().css('visibility' , 'hidden');
            if(floatingBox.hasClass('not-isset')){
                st = st + floatingBox.height() + 10;
            }
            floatingBox.show().addClass("isset").removeClass('not-isset');
        } else {
            console.info(st);
            floatingBox.parent().next().css('visibility' , 'visible');
            if(floatingBox.hasClass('isset')){
                st = st - floatingBox.height() - 10;
            }
            floatingBox.hide().addClass('not-isset').removeClass('isset');
        };
   });
}

// DOM Ready      
$(function() {

   var persistBox;

   $(".persist-area").each(function() {
       persistBox = $(".persist-box", this);
       persistBox.css("width", persistBox.width()).addClass("floatingBox");
   });
   
   $(window).scroll(updatePersistBox).trigger("scroll");
   
});
/* eND Scroll and collapse box on view-pages of item */


// function for collapse a panel that go to fixed position on page item viwe (similar function are in prof-plugins with price value)
$(".toggleConteiner").on("click", ".toggleSwitcher", function(){    
    var thisBox = $(this).parent(), pboxHeight = parseInt(thisBox.height());
    
    $(".toggleBox", thisBox).toggle();
            
    $(".toggleBox", thisBox).promise().done(function(){
        var nextHeight, boxHeight = parseInt(thisBox.height()) - pboxHeight, tboxHeight = pboxHeight -  parseInt(thisBox.height());

        if(thisBox.hasClass('toggled')){
            if(thisBox.hasClass('persist-desc')){
                nextHeight = parseInt($(".persist-juicy").css('top'));
                $(".persist-juicy").css('top', nextHeight - tboxHeight);

                nextHeight = parseInt($(".persist-buy").css('top'));
                $(".persist-buy").css('top', nextHeight - tboxHeight);
                
                nextHeight = parseInt($(".persist-rating").css('top'));
                $(".persist-rating").css('top', nextHeight - tboxHeight);
                
                nextHeight = parseInt($(".persist-purposes").css('top'));
                $(".persist-purposes").css('top', nextHeight - tboxHeight);
                
                nextHeight = parseInt($(".persist-require").css('top'));
                $(".persist-require").css('top', nextHeight - tboxHeight);
            } else if(thisBox.hasClass('persist-purposes')){
                nextHeight = parseInt($(".persist-require").css('top'));
                $(".persist-require").css('top', nextHeight - tboxHeight);
            }
        } else {
            if(thisBox.hasClass('persist-desc')){
                nextHeight = parseInt($(".persist-juicy").css('top'));
                $(".persist-juicy").css('top', boxHeight + nextHeight);
                
                nextHeight = parseInt($(".persist-buy").css('top'));
                $(".persist-buy").css('top', nextHeight + boxHeight);
                
                nextHeight = parseInt($(".persist-rating").css('top'));
                $(".persist-rating").css('top', nextHeight + boxHeight);
                
                nextHeight = parseInt($(".persist-purposes").css('top'));
                $(".persist-purposes").css('top', nextHeight + boxHeight);
                
                nextHeight = parseInt($(".persist-require").css('top'));
                $(".persist-require").css('top', nextHeight + boxHeight);
            } else if(thisBox.hasClass('persist-purposes')){
                nextHeight = parseInt($(".persist-require").css('top'));
                $(".persist-require").css('top', nextHeight - tboxHeight);
            }
        }
        
        if(thisBox.hasClass('toggled'))
            thisBox.removeClass('toggled');
        else
            thisBox.addClass('toggled');
    });
});




.persist-desc {position: fixed; top: 42px;}
.persist-juicy {position: fixed; top: 100px;}
.persist-buy {position: fixed; top: 160px;}
.persist-rating {position: fixed; top: 213px;}
.persist-purposes {position: fixed; top: 278px;}
.persist-require {position: fixed; top: 336px;}




<div class="persist-area">
            <div class="persist-box persist-desc view-box data-box bm10 toggleConteiner display-none">
                <span class="toggleSwitcher">
                    <span class="data-icon rfloat"><img src="/public/img/site_icon/edit.png" alt="icon" /></span>
                    <h2>Descrizione</h2>
                </span>
                <div class="toggleBox display-none">
                    <hr>
                    <p class="ww-bw">{$course->profile->description}</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="display-none">Help for insane</div>
        
        <div class="persist-area">
            <div class="persist-box persist-juicy view-box data-box display-none not-isset">
                <span id="mindInteresting" title="A {$course->profile->interestings} persone interessa questo Video Corso{if $interesting}, compreso te √ {else}, mostra interesse anche te clicando il bottone :) {/if}" class="formToolTip lfloat action-button{if $interesting} big_interesting{else} big_interested{/if} {if $authenticated}greenA{/if}"> {if $interesting} Interessante{else} Mi interessa{/if}</span>

                <a href="#" class="shareplus rfloat"><span class="action-button share">Condividi</span></a>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="view-box data-box bm10">
            <p id="headerInterestN" {if !$course->profile->interestings}style="font-size:45px !important;"{/if} class="centerText c-green thin-text bm10">{$course->profile->interestings|default:'Interessante?'}</p>
            
            <span id="mindInteresting" title="A {$course->profile->interestings} persone interessa questo Video Corso{if $interesting}, compreso te √ {else}, mostra interesse anche te clicando il bottone :) {/if}" class="formToolTip lfloat action-button{if $interesting} big_interesting{else} big_interested{/if} {if $authenticated}greenA{/if}"> {if $interesting} Interessante{else} Mi interessa{/if}</span>

            <a href="#" class="shareplus rfloat"><span class="action-button share">Condividi</span></a>
            <div class="clearfix"></div>
        </div>

            
        <div class="persist-area">
            <div class="persist-box persist-buy view-box data-box display-none not-isset">
                {if !$isprof}
                    <a href="/course/buy?id={$course->id}" id="principalBuy" class="action-button principal-buy">Acquista</a>
                {else}
                    <a href="/course/edit/{$course->id}" title="Guarda i dettagli relativi al corso {$course->profile->name} su MinSqueezer">Gestione VideoCorso</a>
                {/if}   
                <div class="clearfix"></div>
            </div>     
        </div>
        <div class="view-box data-box bm10 centerText">
            {if !$isprof}
                <p class="data-price thin-text ">{$course->price} {$course->profile->currency}</p>
                
                <a href="/course/buy?id={$course->id}" id="principalBuy" class="action-button principal-buy">Acquista</a>
            {else}
                <a href="/course/edit/{$course->id}" title="Guarda i dettagli relativi al corso {$course->profile->name} su MinSqueezer">Gestione VideoCorso</a>
            {/if}
            <div class="clearfix"></div>
        </div>
           
            
        <div class="persist-area">
            <div class="persist-box persist-rating view-box data-box display-none not-isset">
                <a class="action-button brochure lfloat">Brochure</a>

                <a href="#{$feedback_link}" title="Numero votanti: {$course->profile->voters}" class="formToolTip">
                <div class="itemRating rfloat no-phone">
                    <input type="hidden" name="val" value="{$course->profile->vote}"/>    
                </div> <!-- Fine div|mcsciRating no-phone mind_puzzle -->
                </a>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="view-box data-box bm10">
            <a class="action-button brochure lfloat">Brochure</a>

            <a href="#{$feedback_link}" title="Numero votanti: {$course->profile->voters}" class="formToolTip">
            <div class="itemRating rfloat no-phone">
                <input type="hidden" name="val" value="{$course->profile->vote}"/>    
            </div> <!-- Fine div|mcsciRating no-phone mind_puzzle -->
            </a>
            <div class="clearfix"></div>
        </div>
             
        <div class="persist-area">     
            <div class="persist-box persist-purposes view-box data-box toggleConteiner display-none not-isset">
                <span class="toggleSwitcher">
                    <span class="data-icon rfloat"><img src="/public/img/site_icon/trophy.png" alt="icon" /></span>
                    <h2>Finalità</h2>
                </span>
                
                <div class="toggleBox display-none">
                    <hr class="clearfix">
                    <ul>
                    {foreach from=$purposes item=purpose}
                        <li><span>{$purpose['purpose']}</span></li>
                    {/foreach}
                    </ul>
                </div>
            </div>
        </div>
        <div class="view-box data-box bm10">
            <span class="data-icon rfloat"><img src="/public/img/site_icon/trophy.png" alt="icon" /></span>
            <h2 class="bm10">Finalità</h2>
            <hr class="clearfix">
            <ul>
            {foreach from=$purposes item=purpose}
                <li><span>{$purpose['purpose']}</span></li>
            {/foreach}
            </ul>
        </div>
                
            
        {if $requirements|count > 0}
        <div class="persist-area">
            <div class="persist-box persist-require view-box data-box toggleConteiner display-none not-isset">
                <span class="toggleSwitcher">
                    <span class="data-icon rfloat"><img src="/public/img/site_icon/requirement.png" alt="icon" /></span>
                    <h2>Requisiti</h2>
                </span>
                <div class="toggleBox display-none">
                    <hr class="clearfix">
                    <ul>
                    {foreach from=$requirements item=requirement}
                        <li><span>{$requirement['requirement']}</span></li>
                    {/foreach}
                    </ul>
                </div>
            </div>
        </div>
        <div class="view-box data-box bm10">
            <span class="data-icon rfloat"><img src="/public/img/site_icon/requirement.png" alt="icon" /></span>
            <h2 class="bm10">Requisiti</h2>
            <hr class="clearfix">
            <ul>
            {foreach from=$requirements item=requirement}
                <li><span>{$requirement['requirement']}</span></li>
            {/foreach}
            </ul>
        </div>
        {/if}
    </div>