向下滚动可增加div不透明度

时间:2017-04-17 16:07:47

标签: javascript jquery html css

我已经研究过丢失的消息来源,但我的问题没有解决办法。我创建了一个div,它的可见性隐藏在CSS源代码中。我希望在滚动200时以及当300不透明度上的滚动变为1时,从不透明度的0.1开始。

string xmlFragment = @"
    <blah>...</blah>
    <more attr='blah' />
    <fragment attr1='value1' />
    <fragment attr2='value2' attr3='value3' />
    ";

XmlReaderSettings settings = new XmlReaderSettings();
settings.ConformanceLevel = ConformanceLevel.Fragment;

using (XmlReader reader = XmlReader.Create(new StringReader(xmlFragment), settings))
using (var stream = new MemoryStream())
{
    var sw = new StreamWriter(stream);

    while (reader.Read())
    {
        if (reader.NodeType == XmlNodeType.Element && reader.Name == "fragment")
        {
            if (reader.GetAttribute("attr2") != null)
            {
                //change this element
                string test = reader.GetAttribute("attr2");
                sw.Write("<fragment attr2Upd='value2Upd' attr3='value3' />");
            }
        }
        else
        {
            //copy the element the way it is.
            //how do I copy the current element to StreamWriter as-is
        }
    }

    sw.Flush();
    stream.Position = 0;

    using (var streamReader = new StreamReader(stream))
    {
        string test = streamReader.ReadToEnd();
    }
}

2 个答案:

答案 0 :(得分:2)

我认为你正在寻找这样的东西?

$(document).ready(function(){                    
    $(window).scroll(function(){
      let sT =  $(window).scrollTop();
      $('.scrollonh').css({
        opacity: (sT < 201 ? 0 : (sT > 300 ? 1 : (sT - 200)/100))
      })
    });
});
body {
  min-height: 200vh;
}
.scrollonh {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.\32 00pxmark, 
.\33 00pxmark {
  margin-top: 200px;
  height: 0;
  overflow: visible;
  border-top: 1px solid red;
}
.\33 00pxmark {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollonh">I fade on scroll</div>
<div class="200pxmark">200px mark</div>
<div class="300pxmark">300px mark</div>

答案 1 :(得分:0)

试试这个。它根据函数和滚动计算

计算不透明度
$(document).ready(function(){                    
    $(window).scroll(function(){
      var scrollval =   $(this).scrollTop();
      if ( scrollval > 150) {
            $('.fscrollonh').css({"visibility": "visible"});
            $('.fscrollonh').show(500);
            $('.fscrollonh').css({
                opacity: function() {
                 var opacity = (150 * .006) + 0.1;
                 return opacity;
                 }
              });
        }
    else {
            $('.fscrollonh').hide(500);
        }
    });
});

虽然我还没试过,但是。

Hopt有帮助。