Блог

С помощью Jquery я использую .offset() метод для размещения двух столбцов, которые составляют 100% высоты страницы и просто действуют как отбрасывающая тень по краям фактического содержимого.

CSS, который я применил к этим столбцам, является:

 div#lshade,
div#rshade
{
    width: 60px;
    display: block;
    position: fixed;
    height: 100%;
}

div#lshade
{
    background: url(/_private/display/layout/lshade.png) repeat-y;
}

div#rshade
{
    background: url(/_private/display/layout/rshade.png) repeat-y;
}
  

И вот jQuery, который я использую:

 function loaded()
{
    setInterval("fixShade()", 33);
}

function fixShade()
{
    var left = $("#lshade");
    var right = $("#rshade");

    var cont = $("#content").offset();

    left.offset({top: 0, left: cont.left});
    right.offset({top: 0, left: cont.left   900});
}
  

Все это работало, как ожидалось, до тех пор, пока содержимое моей страницы не стало достаточно длинным, чтобы потребовалась прокрутка. Как только страница прокручивается, столбцы перемещаются вверх вместе со страницей, даже если их положение установлено как фиксированное.

Я предполагаю, что использование offset () изменяет это свойство с фиксированного.

Моя цель состоит в том, чтобы эти два столбца всегда были привязаны к началу страницы и составляли 100% высоты страницы (как position: fixed; сделал бы).

Я думаю, что решением будет что-то вроде настройки положения, которое будет выровнено по горизонтали там, где они должны быть, и привязано по вертикали к положению, до которого вы прокрутили (то есть в верхней части окна).

Вот веб-сайт, над которым я работаю в данный момент, если это поможет:http://cherishbeauty.businesscatalyst.com/treatments.html

смещение, похоже, определяет только высоту вашего левого или правого элемента затенения. Попробуйте

 left.offset({top: 0, left: cont.left}).css("height",$(window).height());
  

или

 left.offset({top: 0, left: cont.left}).css("height",$(document).height());
  

или лучший вариант

 left.offset({top: 0, left: cont.left}).css("height",$("#innerContent").height());
  

или вам нужно получить высоту другого элемента, которая идет полностью вниз. Не уверен, что это такое. возможно, innerContent