Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Ламерские вопросы » Объединение двух js скриптов в один

Объединение двух js скриптов в один


     27.10.2013    Все вопросы » Ламерские вопросы    3215

вопрос
Есть два скрипта:
/* #1 */
$(document).ready(function(){var a=$("#header-1").offset().top;$(window).scroll(function(){if($(window).scrollTop()>a){$("#header-1").css({position:"fixed",top:"-2px"})}else{$("#header-1").css({position:"static"})}})});
/* #2 */
$(document).ready(function(){var b=$("#header-2").offset().top;$(window).scroll(function(){if($(window).scrollTop()>b){$("#header-2").css({position:"fixed",top:"-2px"})}else{$("#header-2").css({position:"static"})}})});
Отличаются они только #header-1 и #header-2. Можно как то склеить все в один скрипт?

Ответил: TheImDim



$(document).ready(
function () {
    var h1 = $("#header-1");
    var h1 = $("#header-2");
    var a = h1.offset().top;
    var b = h2.offset().top;
    $(window).scroll(function () {
        var w = $(window).scrollTop();
        if ( w > a ) h1.css({position:"fixed",top:"-2px"});
        else h1.css({position: "static"});
        if ( w > b ) h2.css({position:"fixed",top:"-2px"});
        else h2.css({position: "static"});
    });
});

9 комментариев

TheImDim
Юзер

TheImDim - 27 октября 2013 11:16 -

Опечатка:


var h1 = $("#header-1");
var h2 = $("#header-2");


P.S. давно пора уже узнать про jspretty

Sander
PHP-developer

Sander - 27 октября 2013 21:50 -

Чего-то я сегодня добрый...
Лови универсальный скрипт на любое количество хидеров.

<script>
$.fn.posfixstat = function() {
    var $this = $(this);
    var a = $this.offset().top;
    $(window).scroll(function(){
        var w = $(window).scrollTop();
        if ( w > a ) $this.css({position:"fixed",top:"-2px"});
        else $this.css({position: "static"});
    });
};
$(function(){
    $("#header-1").posfixstat();
    $("#header-2").posfixstat();
})
</script>

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

ПафНутиЙ
Админ

ПафНутиЙ - 27 октября 2013 22:06 -

$("#header-1, #header-2").posfixstat();
не?

Каков вопрос - таков и ответ. Просто помните об этом.

Sander
PHP-developer

Sander - 28 октября 2013 00:50 -

Да :)

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Gopr
Юзер

Gopr - 28 октября 2013 00:02 -

Спасибо, но от TheImDim мне вариант больше подходит, есть возможность регулирования
{position:"fixed",top:"-2px"}
для каждого #header-число

Sander
PHP-developer

Sander - 28 октября 2013 00:51 -

Вуаля.
<script>
$.fn.posfixstat = function(o) {
    var $this = $(this);
    var a = $this.offset().top;
    $(window).scroll(function(){
        var w = $(window).scrollTop();
        if ( w > a ) $this.css({position:"fixed",top:o+"px"});
        else $this.css({position: "static"});
    });
};
$(function(){
    $("#header-1").posfixstat(-2);
    $("#header-2").posfixstat(-5);
})
</script>

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Gopr
Юзер

Gopr - 28 октября 2013 01:10 -

Ок, поставил ваш вариант, все же старались хоть ответ уже был дан + у вас на 58 символов код легче xD

ПафНутиЙ
Админ

ПафНутиЙ - 28 октября 2013 01:59 -

Оптимизация не знает границ )))
$.fn.posfixstat = function() {
    var $this = $(this);
    var a = $this.offset().top;
    var o = ($this.data('top')) ? $this.data('top') : 0;
    $(window).scroll(function(){
        var w = $(window).scrollTop();
        if ( w > a ) $this.css({position:"fixed",top:o+"px"});
        else $this.css({position: "static"});
    });
};
$(function(){
    $("#header-1, #header-1").posfixstat();
});

HTML:

<div id="header-1" data-top="-2"></div>
<div id="header-2" data-top="-5"></div>

А для чего собственно этот скрипт нужен?

Каков вопрос - таков и ответ. Просто помните об этом.

Gopr
Юзер

Gopr - 28 октября 2013 02:05 -

А для чего собственно этот скрипт нужен?
Это Липкий хедер на jQuery. Просто у меня два таких блока.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх