плавающей DIV с помощью JQuery()

Здравствуйте, друзья я разработал плавающей DIV и его прекрасно работает, но по некоторым причинам я не хочу использовать position:relative или position:absolute в моем кодеплавающей DIV с помощью JQuery()

$(window).scroll(function() { 

     var topWindowPosition = $(window).scrollTop(); 
     var leftWindowPosition = $(window).scrollLeft(); 
     var topLeftNavHeight = 200; 
     if (topWindowPosition >= topLeftNavHeight) { 
      $("#scroll").css({ top: topWindowPosition - topLeftNavHeight, left: 0, position: 'relative' }); 
     } else { 
      $("#scroll").css({ top: 0, left: 0, position: 'relative' }); 
     } 
     $("#scroll").forceRedraw(); 
    });

вы также можете увидеть работать демо здесь

http://jsfiddle.net/9E225/1/

я могу сделать тот же эффект без использования позиций, пожалуйста, помогите мне.

Заранее спасибо

источник

2012-04-04 Kamal

Sure, просто использовать margins вместо positions. Например:

if (topWindowPosition >= topLeftNavHeight) { 
    $("#scroll").css({ marginTop: topWindowPosition - topLeftNavHeight, marginLeft: 0}); 
} else { 
    $("#scroll").css({ marginTop: 0, marginLeft: 0 }); 
}

jsFiddle: http://jsfiddle.net/9E225/2/

источник

2012-04-04 11:22:22

Я бы разместил то же самое. «marginLeft» на самом деле не нужен. – keystorm

Ха-ха, я только что отредактировал существующий jsFiddle, не уверен, что у него есть другое преимущество. Если нет, то @Kamal вы можете удалить marginLeft :) –

Спасибо, что у вас есть жизнь заставка :) – Kamal

Я не знаю, как вы относитесь к этому подходу. Он фиксирует элемент на месте, когда он выходит за пределы элемента скроллера, и защелкивается назад, когда он возвращается. Главное преимущество этого подхода состоит в том, что ваш элемент #scroll не будет «прыгать» назад и перепозиционироваться при каждом запущенном событии прокрутки.

Example | Код

var $el = $("#scroll"); 
var original_top = $el.position().top; 

$(window).scroll(function() { 
    //Scrolled past element 
    if($(window).scrollTop() >= original_top){ 
     //Add hooked element, if it's not already hooked 
     if(!$el.hasClass("hooked")) $el.addClass("hooked"); 
    }else if($(window).scrollTop() <= original_top){ 
     //Scrolled up before element, remove hooking and return back to normal 
     if($el.hasClass("hooked")) $el.removeClass("hooked"); 
    } 
});

CSS

.hooked{ 
    position: fixed; 
    top: 0; 
    left: 0; 
}

Кроме того, я рекомендую взглянуть на this "JQuery Waypoints" library. Он работает так же, как и указанный выше код, но обладает гораздо большей функциональностью. :)

источник

2012-04-04 11:34:44 ShadowScripter

плавающей DIV с помощью JQuery()

ответ

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