zeni1agent

Возможно я нашел решение

ul:not(.menu) {
  overflow: hidden;
  max-height: 0;
  transition: 0.5s ease-out;
}

li:hover>ul {
  max-height:100vh;
  transition: 0.5s ease-in;
}

Я кажется разобрался в чем дело надо было добавить

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb,
input[type=range]{
cursor : help;
}

Вот то что удалось построить мне на js

.block{
 display:flex;
 flex-direction: row-reverse;
 justify-content: center; 
}
.block input{
 display:none;
}

label{
  width:100px;
  height:100px;
   background-color:#878787;
  margin:10px;
}

<div class="block">
<input type="radio" name="test" id="id_test_5" value="5" /> 
<label for="id_test_5"></label> 
<input type="radio" name="test" id="id_test_4" value="4" /> 
<label for="id_test_4"></label> 
<input type="radio" name="test" id="id_test_3" value="3" /> 
<label for="id_test_3"></label> 
<input type="radio" name="test" id="id_test_2" value="2" /> 
<label for="id_test_2"></label> 
<input type="radio" name="test" id="id_test_1" value="1" /> 
<label for="id_test_1"></label> 
</div>

//Функция перевода c rgb в hsv
function rgb2hsv (r, g, b) {
    let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
    rabs = r / 255;
    gabs = g / 255;
    babs = b / 255;
    v = Math.max(rabs, gabs, babs),
    diff = v - Math.min(rabs, gabs, babs);
    diffc = c => (v - c) / 6 / diff + 1 / 2;
    percentRoundFn = num => Math.round(num * 100) / 100;
    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(rabs);
        gg = diffc(gabs);
        bb = diffc(babs);

        if (rabs === v) {
            h = bb - gg;
        } else if (gabs === v) {
            h = (1 / 3) + rr - bb;
        } else if (babs === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: percentRoundFn(s * 100),
        v: percentRoundFn(v * 100)
    };
}

var color_full = $("label").css("background-color");
var newstr = color_full.match(/(\d+), (\d+), (\d+)/);  var hsv_color =  rgb2hsv (newstr[1], newstr[2], newstr[3]);

$("input").change(function() {
  if(this.checked) {    
var ryt = $(this).nextAll('label').length;  
   
for (var i = 0; i <= ryt; i++) {
 $('label:eq('+-i+')').css('background-color', 'hsl('+hsv_color.h+','+i*20+'%,'+hsv_color.v+'%)');     
}  
  
$(this).prevAll('label').css('background-color', ''); 
     }  
});

Вот мой ответ хоть кривой но рабочий

$('document').ready(function(){ 

  
  var width3 = (parseInt ($('#tes1').css('width')) * 100 / parseInt (document.querySelector('.window').scrollWidth))+"%"
var height3 = (parseInt ($('#tes1').css('height')) * 100 / parseInt ( document.querySelector('.window').scrollHeight))+"%"

var top3 = (parseInt ($('#tes1').css('top')) * 100 / parseInt (document.querySelector('.window').scrollHeight))+"%"
var left3 = (parseInt ($('#tes1').css('left')) * 100 / parseInt (document.querySelector('.window').scrollWidth))+"%"


document.getElementById("tes1").style.height =  height3;
document.getElementById("tes1").style.width = width3;

document.getElementById("tes1").style.top =  top3;
document.getElementById("tes1").style.left = left3;
});

.window{
width:40%;
height:600px;
background-color:#b32727;
margin:10px;
display:inline-block;
position: relative;
overflow: hidden;
}

.absol{
width:100%;
height:100%;
background-color:#fff;
position:absolute;
}
.absol img {
  width:100%;
  height:100%;
}

.tes{
color:#fff;
background-color:#000;
position:absolute;
}

.test1{
 width:150px;
height:150px;
left:20px;
top:50px;
}

<div class="window">
  
  
<div class="absol">
  <img  src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
  <div class="tes test1" id="tes1">вамм</div> 
</div>  
</div>

code

Я вроде понял как это исправить вместо width надо было max-width

.algin p{
max-width: calc(100vw - 20px * 2);
}

Мое решение

jQuery('document').ready(function(){
  
  
$(function(){
var CurrentScroll = 0;
  $(window).scroll(function(event){
  var NextScroll = $(this).scrollTop();
if (NextScroll > CurrentScroll){		  
var s = $(window).scrollTop();
$('.test2').css('top', -s+0);
}
else {         
var s = $(window).scrollTop();
$('.test2').css('top', -s+0);
}
      CurrentScroll = NextScroll;
  });
});

Самый нормальный вариант который я нашел
chrisarasin.com/frosted-glass-css/draggable-window