воткнуть ДИВ в DIV, когда свиток

Пожалуйста, проверьте скрипку: http://jsfiddle.net/howtoplease/f8sXN/4/воткнуть ДИВ в DIV, когда свиток

Я хочу сделать .float липкий с помощью JQuery для .right когда прокрутки.

HTML код

<div class="main"> 
    <div class="float"> 
     float 
    </div> 
    <div class="right"> 
     Stick float to me 
    </div> 
</div>

код CSS

.main{ 
    margin-bottom:30px; 

} 
.float{ 
    background: #333333; 
    color: #FFFFFF; 
    float: left; 
    height: 40px; 
    margin-right: 20px; 
    width: 40px; 
} 
.right{ 
    background: none repeat scroll 0 0 #AAAAAA; 
    height: 245px; 
    overflow: hidden;  
}

источник

2013-11-29 Anonymous

http://jsfiddle.net/f8sXN/7/ это что вы имеете в виду «липким»? –

http://jsfiddle.net/UD_B/f8sXN/8/ это то, что вы хотите? – UDB

@ AndreasBjørn нет, это плавающий целой div, я просто хочу сделать '.float', когда прокрутка –

изменили Mark S «s ответ держать .float на левой стороне, как на странице которого предоставляется ссылка на комментарий

$(window).scroll(function() { 
var st = $(this).scrollTop(); 

$('.main').each(function() { 
    var $this = $(this), 
     offset = $this.offset(), 
     h = $this.height(); 

    if (st >= offset.top && st < offset.top + h - 40) { 
     $this.find('.float').css({ 
      'margin-top': st - offset.top + 'px' 
     }); 
    } else if (st >= offset.top + h + 30/*.main margin-bottom*/) { 
     $this.find('.float').css({ 
      'margin-top': 'auto' 
     }); 
    } 


}) 
});

DEMO

источник

2013-11-29 04:05:38 UDB

Ничего себе, это решение тоже удивительно, мне нравится, потому что 'float' не исчезает внезапно, как @Mark s –

Это должно сделать:

$(window).scroll(function(){ 
var st = $(this).scrollTop(); 

$('.main').each(function(){ 
    var $this = $(this), 
     offset = $this.offset(), 
     h = $this.height(), 
     $float = $this.find('.float'), 
     floatH = $float.height(); 

    if(st >= offset.top && st < offset.top + h - floatH){ 
     $float.css({'position':'fixed'}); 
    }else{ 
     $float.css({'position':'absolute'}); 
    } 
}) 
});

CSS:

.main{ 
    margin-bottom:30px; 
    /* set main to realtive so float won't move out bounds */ 
    position:relative; 
} 

.float{ 
    background: #333333; 
    color: #FFFFFF; 
    height: 40px; 
    width: 40px; 
    /* set top to 0 and position to absolute*/ 
    top:0; 
    position:absolute; 
} 

.right{ 
    background: none repeat scroll 0 0 #AAAAAA; 
    height: 245px; 
    overflow: hidden; 
    /* the float width:40 plus its margin-right:20 that I removed*/ 
    margin-left:60px; 
}

Я обновил ответ, чтобы решить проблему на '.right' - поддерживая ту же ширину и позицию.

Аналогично @UDB решение, но на этом методе (изменение 'margin-top') Я заметил, что '.float' иногда встряхивая особенно на длинном свитке и прокрутка быстро это происходит: enter image description here

На моем новом решении мы только изменяя position собственности так что вопрос до сих пор.

См. Это jsfiddle.

Спасибо также @Zeaklous и @UDB идеи.

источник

2013-11-29 03:37:47

Проверьте нижние границы, вычтите высоту поплавка –

Спасибо, точно, что я искал. –

воткнуть ДИВ в DIV, когда свиток

ответ

Смежные вопросы