小编use*_*839的帖子

我将非常感谢您提供一些指导甚至解决方案！

从一组类名中，我正在使用for循环生成图标集：

// icon array
var iconsArray = ['fa-search','fa-toggle-up','fa-link']; 
var iconsArrayLength = iconsArray.length;

    // loop through array
    for (var i = 0; i < iconsArrayLength; i++) {

        // result
        console.log('<i class="fa' + ' ' + iconsArray[i] + '"></i>');

    }

我也有一个导航元素。该列表具有相同数量的ID项：

<nav>

    <ul id="nav">

        <li><a href="">link 1</a></li>
        <li><a href="">link 2</a></li>
        <li><a href="">link 3</a></li>

    </ul>

</nav>

问：如何将返回的图标集附加/添加到正确的导航项之前？

为了清楚起见，第一个数组值用于第一个导航项，依此类推。

我敢肯定有什么可以回答这个问题的，但是强大的G似乎并不想为我服务！

提前致谢。

回应评论...

结果列表如下所示：

<nav>

    <ul id="nav">

        <li><a href=""><i class="fa fa-search"></i>link 1</a></li>
        <li><a href=""><i class="fa fa-toggle-up"></i>link 2</a></li>
        <li><a href=""><i class="fa fa-link"></i>link 3</a></li>

    </ul>

</nav>

本质上,我正在尝试做的是将CSS类应用于上下文中的元素到文档的滚动位置.

具体来说,允许我的侧边栏导航滚动到视图端口顶部下方20px以及其余内容,此时元素变为固定位置,这要归功于添加了css类,直到文档随后向后滚动在该点之上,当删除该类并且该元素再次与页面内容的其余部分一起滚动时.

我需要解决方案尽可能轻,并且不希望使用除jQuery之外的任何库,这已经存在.它应该与响应式布局和跨浏览器兼容 - 包括IOS和Andriod平板电脑.

这是我到目前为止的JS,作为$(document).ready()函数执行:

// fixed element target
var $fixedElement = $("#fixIt");

// if the element exists
if ($($fixedElement).length > 0) {

    var $fixedElementTop = $fixedElement.offset().top -20;

        $(window).scroll(function(){
            // add .fixed else remove class
            if ($(this).scrollTop() > $fixedElementTop) {
                $('#fixIt').addClass('fixed');
            }else{
                $('#fixIt').removeClass('fixed');
            }

        });

} 

这在所有浏览器中都能完美运行(无论如何最新版本)除了Safari - 那是Safari ..没错.它也适用于IE!截至本文撰写时,我还未对平板电脑进行过测试.

问题是Safari返回了不同的值$fixedElementTop.它大约450px.

由此我确定在我想要应用该类的元素上方的响应元素上缺少高度属性,这很可能是发生这种情况的原因 - 但仅限于Safari.

我认为jQuery提供了解决这些问题的方法,但不能为我的生活解决问题.我已经在这个网站上阅读了10篇或更多的文章,还有更多来自其他网站的文章,似乎没有解决这个问题.

注意:该函数必须以动态方式工作 - 我不能简单地考虑我想要添加类的元素上方的所有元素并在此基础上进行计算,例如,因为这些细节将会改变从页面到页面.

这就是为什么我没有包含任何HTML或CSS的问题 - 我认为正确的解决方案应该使用任何兼容的标记.

有任何想法吗？提前致谢.

编辑

根据请求的HTML/CSS(抱歉);

HTML

<div id="billboard-wrap">

    <div class="container">

        <div class="sixteen columns">

            <div …