小编jki*_*ilp的帖子

我有一个问题,我认为最好用图像来解释,所以我要附上它.

好吧,基本上我拥有的是一个父容器,里面有一个元素(它实际上是一个文本块),我们将其称为FIXED元素.

当用户位于页面顶部时,我希望固定元素位于其父级的顶部.当用户开始向下滚动页面,并且父节点开始向上移动视图端口时,我希望固定元素跟随滚动直到它到达其父节点的底部,然后它停在那里.

目前还没有HTML或其他任何内容,因为我正处于本网站的粗略草图阶段.

我一般都习惯使用jQuery或javascript,我的JS技能有限,而且我熟悉jQuery,但我不介意复制和粘贴代码并搞乱它.

任何帮助将不胜感激.谢谢!

我有一个浮动的图像列表,每个图像的右边距为10px.我使用jquery给最后一个LI元素一个"last"类,它删除了右边距.

这是我正在使用的jQuery:

$('ul.grid_list li:nth-child(3n)').addClass('last');

所以这个使得每行有3个LI元素.

我需要做的是根据容器div的大小将"last"类附加到不同的LI元素.

我使用媒体查询来增加容器div宽度,它分为4:Mobile(每行2 LI),Facebook iFrame 520px(每行3 LI),iPad Portrait(每行4 LI),960px(每行5 LI) )

所以它基本上需要做的就是这样......

如果是960px宽,将"last"添加到第5个Li子如果是520px宽,则将"last"添加到第3个LI子

我希望一切都有道理.如果您需要更详细的信息,请告诉我.我愿意根据窗口大小为容器div添加不同的类名.

提前致谢!

编辑:

对不起,在回答一个问题时,html设置如下:

<div id="wrapper">
...
    <ul class="grid_list">
        <li></li>
        <li></li>
        <li class="last"></li>
        <li></li>
    </ul>
...
</div>

WRAPPER是容器元素,它可以获得附加的大小.

我有一个jquery幻灯片,它使用导航列表来切换幻灯片图像.它的工作原理是当您将鼠标悬停在导航列表上时,它突出显示('.active')并且关联的图像会切换到该列表.导航列表中有链接,也可以单击这些链接转到其他页面.

我需要这个在平板电脑上工作,这样当人们点击导航列表时,它会变为活动状态,然后图像幻灯片切换,然后如果再次点击它会跟随到该链接.现在发生的事情是,只要点击它,它就会变为活动状态并点击进入.

这是jquery

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } …

我的html页面中有一堆div,它们都是块元素(一个在另一个上面,没有浮动),我想要的是每次这些div中的一个从窗口顶部达到150px时,它得到一个类.active应用于它.所有这些div都具有相同的类名,但它们各自具有不同的ID以区分它们.所以我需要一些jQuery代码,可以对每个div执行相同的过程,而不必为每个div编写代码.

这是html:

<div id="steps">
   <div class="step" id="step-1"></div>
   <div class="step" id="step-2"></div>
   <div class="step" id="step-3"></div>
   <div class="step" id="step-4"></div>
</div>

我有jquery工作,但它针对一个ID,所以我需要它更动态,以便它可以针对每个.总共只有4个步骤.

var distance = $('#step-1').offset().top - 150,
$window = $(window);
$window.scroll(function() {
   if ( $window.scrollTop() >= distance ) {
     $('#step-1').addClass('active');
     }
   });

谢谢你的帮助!