Смещение фиксированного деления сверху и снизу - PullRequest
Новая
       10

Смещение фиксированного деления сверху и снизу

2 голосов
/ 03 апреля 2020

У меня есть фиксированный div на правой стороне моей страницы. Я настроил его для прокрутки страницы и не перекрывал нижний колонтитул, и он прекрасно работает. Проблема в том, что при прокрутке он перекрывает навигацию. Есть ли способ заставить его работать на обоих? Я пытался создать новую функцию 

function checkOffset() {
    var a = $(document).scrollTop() + window.innerHeight;
    var b = $('#footer').offset().top;

    if (a < b) {
        $('#social-float').css('bottom', '10px');
    } else {
        $('#social-float').css('bottom', (10 + (a - b)) + 'px');
    }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

<nav class="nav">Nav Sample</nav>

<div id="social-float">
    <div class="sf-twitter">twitter</div>
    <div class="sf-facebook">facebook</div>
</div>

<div id="footer">footer sample</div>

1 Ответ

1 голос
/ 04 апреля 2020

Здесь проверьте эту скрипку для решения. Я добавил отладочный текст на страницу, а также учел тот факт, что навигационная панель может быть смещена из-за других элементов div вверху. 

/** 
 * This function checks for both top and bottom edges to position itself
 * on the page
 */
function checkOffset() {
    var documentTop = $(document).scrollTop();
    var currentScrollOffset = documentTop + window.innerHeight;
    var footerOffset = $('#footer').offset().top;
    var navbarEffectiveHeight = $('.nav').outerHeight() + $('.nav').offset().top;
    var $fixedElem = $('#social-float');
    var fixedElemHeight = $fixedElem.outerHeight();

		// until page scroll crosses navbar bottom edge (offset)
    if (currentScrollOffset < navbarEffectiveHeight) {
    		$fixedElem.css('top', (currentScrollOffset + 10) + 'px');
        $fixedElem.css('bottom', 'unset');
    // page scroll crossed navbar bottom edge but not to extend of the height of fixed div
    // including the top and bottom spacing for it which is 20px
    } else if (currentScrollOffset < navbarEffectiveHeight + fixedElemHeight + 20) {
    		$fixedElem.css('top', (window.innerHeight - (currentScrollOffset - navbarEffectiveHeight) + 10) + 'px');
        $fixedElem.css('bottom', 'unset');
    // page scroll hasn't crossed footer top edge (offset)
    } else if (currentScrollOffset < footerOffset) {
        $fixedElem.css('bottom', '10px');
        $fixedElem.css('top', 'unset');
    // page scroll crossed footer top edge (offset)
    } else {
        $fixedElem.css('bottom', (10 + (currentScrollOffset - footerOffset)) + 'px');
        $fixedElem.css('top', 'unset');
    }
}


$(document).ready(checkOffset);
$(document).scroll(checkOffset);
...