Исправить содержимое, чем прокручивать, когда пользователь находится в конце страницы

Question

Немного головоломки.

У меня есть div, который я хочу отображать на экране в любое время. Я использую следующий CSS:

<style> 
    .f {position: fixed; 
    bottom:0px 
    align:center; 
    } 
</style> 

Я пытаюсь понять, как не держать его прикреплено к нижней части экрана до 200px от конца, я хочу, чтобы это прокручивать со страницей, то так будет 200px от внизу, когда пользователь прокручивается в нижней части страницы.

Любая помощь будет принята с благодарностью

Answer 1

Позволяет сделать основной сборки до:

<div id="content">Content to be scrolled as Wrapper </div> 
<div id="mydiv" class="fixed"> Div that should be fixed </div> 
<div id="end"> Everything after the fixed div </div> 

Мы быстро исправить DIV в нижней части с помощью класса .fixed, так что мы можем использовать .addClass('fixed') и .removeClass('fixed') для переключения некоторые атрибуты css.

.fixed { 
    position: fixed; 
    bottom: 0; 
} 

Так что эта .scrollTop функция, которая позволяет прокручивать определенное количество пикселей от верха до низа. Это уже то, что вам нужно. Хитрость заключается в том, чтобы узнать, сколько пикселей от вершины фиксированного элемента должно начинаться с прокрутки с содержимым.

позволяет сделать некоторые JQuery, чтобы узнать:

// Create function to add/remove Class if .scrollTop 
$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(window); 

    $window.scroll(function (e) { 
     if ($window.scrollTop() < pos) { 
      $this.addClass('fixed'); 
     } else { 
      $this.removeClass('fixed'); 
     } 
    }); 
}; 

var $height_content = $('#content').outerHeight(); //get height of content 
var $height_div = $('#mydiv').outerHeight(); //get height of fixed div 
var $height_viewport = $(window).height(); //get height of viewport 
var $fixed_till = ($height_content + $height_div - $height_viewport); 

// Use function created above like so: 
// $('selector').followTo(/* height from top in px */); 
$('#mydiv').followTo($fixed_till); 

Проверьте DEMO ON JSFIDDLE