0

I want to show titles when a image is at the top and I want to hide them when they are not anymore at the top. It kind of works, but it does not hide the elements anymore and the pop up is a bit unpredictable. How can I make this code work better?

My sources for this approach: sitepoint and stack overflow

I use this code to check the position of the images on the screen:

$(document).scroll(function() {
  $(".grid-item").each(function() {
    var el = $(this);
    var top = el.offset().top - $(document).scrollTop();

    if (top < 200 && top > 0) {
      document.getElementById("p" + el.attr("id")).style.visibility = "visible";
      return;
    };
    if (top > 200 && top < 0) {
      document.getElementById("p" + el.attr("id")).style.visibility = "hidden";
      return;
    };

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidenav">
<h1>{{page.titel}}</h1>
<p>{{page.technik}},<br>{{page.datum}}</p>
    <div class="textp1">{{page.beschreibung}}</div>
    
<div class="werk">
    </div>
<div id="main">
  <button class="openbtn" onclick="openNav()">&#9776; </button> 
</div>
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  {% for projekt in site.projekte%}
  <a href="{{projekt.url}}">{{projekt.titel}} </a>
{% endfor%}
</div>
    
    {% for desc in page.descs%}
    <div class="desc"; id="p{{forloop.index}}">
    <p> {{desc}}</p>
    </div>
    {% endfor%}
</div>


<div class="grid-container">
    <div class="floater"></div>
{% assign someVar = 0 %}
{% for image in site.static_files %}
    
    {% if image.path contains '04_Skizzenbuch' %}
    {%  assign someVar = someVar | plus: 1 %}
    
        <div class="grid-item"; id="{{someVar}}"><img class="resize"; src="{{ site.baseurl }}{{ image.path }}" alt="{{forloop.index0}}" /></div>
    {% endif %}
   
{% endfor %}
       

</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Luis
  • 1
  • 1

2 Answers2

0

Here is an example using classes and a revised set of code and ugly but demonstrative content.

$(document).on('scroll', function() {
  $(".grid-item").each(function() {
    let el = $(this);
    let top = el.offset().top - $(document).scrollTop();
    //console.log(top);
    let shouldShow = top > 0 && top < 200;
    el.find('.title').toggleClass("hidden", shouldShow);
    return;
  });
});
.hidden {
  display: none;
}

.my-things {
  border: 1px solid red;
 
}

.grid-item {
  width: 100%;
  height: 10em;
  border: solid green 2px;
}
.grid-item .title {
  width: 100%;
  height: 2em;
  border: solid orange 2px;
}
.grid-item .thing {
  width: 100%;
  height: 7em;
  border: solid blue 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-things">

  <div class='grid-item'>
    <div class="title">griddler1</div>
    <div class="thing">thing 1</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler2</div>
    <div class="thing">thing 2</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler3</div>
    <div class="thing">thing 3</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler4</div>
    <div class="thing">thing 4</div>
  </div>
  <div class='grid-item'>
    <div class="title">griddler5</div>
    <div class="thing">thing 5</div>
  </div>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
0

Thanks Mark, I got it working this way. I assign a class and remove it from a div, when the condition of the if statement is true. else, I remove it.

Sorry, I tried to make a snippet that works, but I could not make it working. I am not sure what my code does :/

I found a similar approach here: sitepoint

Script:


$(document).scroll(function(){
    $(".grid-item").each(function(){
        var el = $(this);
        var top = el.offset().top - $(document).scrollTop();
        /*console.log("p"+el.attr("id"));
        console.log(el.attr("id") +(" ")+ top);*/
        if (top < 400 && top > 0) {
            $("#p" + el.attr("id")).addClass("show");
            return;
        }else {
            $("#p" + el.attr("id")).removeClass("show");
            return;
        };
    })
});

css:

.desc{
    display:none;
    float: left;
    bottom: 10px;
    left: 10px;
    z-index: 10;
}

.show{
    display: block;
}

html structure (jekyll):


    </div>
        <div class="floater">
            {% assign AbbCounter = 0 %}
            {% for desc in page.descs%}
            {%  assign AbbCounter = AbbCounter | plus: 1 %}
                <div class="desc"; id="p{{forloop.index}}">
                <p> Abb. {{AbbCounter}}: {{desc}}</p>
                </div>
            {% endfor%}
        </div>
    </div>


    <div class="grid-container">
        <div class="floater"></div>
    {% assign someVar = 0 %}
    {% for image in site.static_files %}

        {% if image.path contains '06_PraktikumP3' %}
        {%  assign someVar = someVar | plus: 1 %}

            <div class="grid-item"; id="{{someVar}}">
                <img class="resize" src="{{ site.baseurl }}{{ image.path }}">
                </video>
            </div>
        <!--class="resize"; src="{{ site.baseurl }}{{ image.path }}" alt="{{forloop.index0}}" />-->
        {% endif %}

    {% endfor %}

    </div>
Luis
  • 1
  • 1